在CSS之前或之后更改SVG填充颜色

我有一个像这样的SVG图形：

a::before { content: url(filename.svg); } 

当我将鼠标hover在标签上时，我真的希望SVG更改填充颜色，而不加载新的SVG文件，就像我现在一样：

 a:hover::before { content: url(filename_white.svg); } 

这可能是使用JavaScript，jQuery或只是我不知道的纯CSS吗？

谢谢。

Answer 1

使用content属性在function上生成（非暴露）标记，与元素中的svg相同。

您不能将样式应用于svg文档中的元素，因为：

1. 样式不允许跨文档级联
2. 当使用（或content ，或任何引用svg的css图像属性）时，由于安全问题，浏览器不会公开svg文档

类似的问题，但在这里和这里的 background-image 。

所以，要做你想做的事，你必须以某种方式绕过两点。 这样做有多种选择，例如使用内联svg，使用filter（应用于）或生成不同的svg文件（或数据URI），如问题所示。

Answer 2

接受的答案是不正确的，这实际上可以通过应用SVG蒙版和背景颜色的变通方法来实现：

 p:after { width: 48px; height: 48px; display: inline-block; content: ''; -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; } .red:after { background-color: red; } .green:after { background-color: green; } .blue:after { background-color: blue; } 

 
red heart
 
green heart
 
blue heart