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

我有一个SVG图形，如下所示：

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

当我将鼠标悬停在标记上时，我确实希望SVG更改填充颜色，而无需加载新的SVG文件，正如我现在所做的：

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

这可以通过使用JavaScript、jQuery或我不知道的纯CSS来实现吗

---

谢谢。

使用

content

属性生成（未公开）功能等同于元素中svg的标记

无法将样式应用于svg文档中的元素，因为：

不允许在文档之间层叠样式

使用（或

内容

，或任何引用svg的css图像属性）时，出于安全考虑，浏览器不会公开svg文档

类似的问题，但适用于背景图像和

---

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

接受的答案不正确，这实际上可以通过使用svg掩码和背景色的变通方法实现：

p:after{
宽度：48px；
高度：48px；
显示：内联块；
内容：''；
-webkit掩码：url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg)无重复50%50%；
掩码：url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg)无重复50%50%；
-webkit面具尺寸：封面；
面具尺寸：封面；
}
雷德：以后{
背景色：红色；
}
格林：以后{
背景颜色：绿色；
}
蓝：之后{
背景颜色：蓝色；
}

红心

绿色之心

blue heart

一种类似于无需设置的技术

显示：内联块

。当您希望保留

display:inline

以确保

：after

内容不独立于前面的文本内容换行时，这在措辞内容中非常有用

还使用剪辑路径防止背景色在Safari中泄漏（其用途取决于图像/线条高度等）

a[target=“_blank”]：之后{
背景色：当前颜色；
内容：“；
填充：0.5em；
保证金：0.125雷姆；
-webkit掩码图像：url（“数据：图像/svg+xml；字符集=utf-8，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E”）；
掩码图像：url（“数据：图像/svg+xml；字符集=utf-8，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E”）；
-webkit掩码重复：无重复；
面罩重复：不重复；
-webkit掩码位置：中间；
遮罩位置：中心；
剪辑路径：填充框插图（0.28125em 0）；
}

---

Lorem ipsum sumit dolar

Maniupolating

:before

和/或

：after

伪元素无法通过JavaScript实现。它们不存在于DOM中。不确定，但可能会对您有所帮助。我认为您应该更新此方法的支持（）。如果您想使用此方法，您需要同意删除一些浏览器。实际上，它甚至低于88%。浏览器中的部分支持不支持您正在使用的功能。例如，Firefox不支持它。效果很好，您可以在内容属性（或使用fontawesome）中使用Unicode符号。内容：''似乎不是必需的。@coops很高兴我能帮助某人：）