更改伪元素中 data-URI SVG 路径的填充颜色

Posted 2023-03-05

【中文标题】更改伪元素中 data-URI SVG 路径的填充颜色

【英文标题】：Change fill color of data-URI SVG path in pseudo element

【发布时间】：2013-08-29 09:02:15

【问题描述】：

是否可以使用 CSS 更改伪元素 data-URI 中的 SVG 路径的颜色？

<a href="http://externalurl/">External Site</a>

CSS：

a[href^="http://"]:after  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); 
a[href^="http://"]:hover:after path  fill: #000; 

【参考方案1】：

不是这样，因为 svg 内容在另一个文档中。样式不适用于文档。

由于通过 CSS 像这样引用时 svg 将被视为哑图像，因此将路径悬停样式放在 svg 内也无济于事。

如果您想在文档中设置一些形状的样式，我建议您将 svg 内嵌在文档中。

也就是说，更改图像颜色的另一种可能性是使用滤镜，因为它们可以从外部应用。如果您的图像很简单，那可能会起作用。