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

前端之家收集整理的这篇文章主要介绍了css – 更改伪元素中data-URI SVG路径的填充颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用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; }

解决方法

不是那样,因为svg内容在另一个文档中.样式不适用于各种文档.

并且由于svg将被视为一个愚蠢的图像,当通过CSS引用时,将路径悬停样式放在svg中也无济于事.

如果你想在里面设置一些形状,我建议把svg内联在文档中.

也就是说,改变图像颜色的另一种可能性是使用滤镜,因为它们可以从外部应用.如果您的图像很简单,可能会有效.

猜你在找的CSS相关文章