在 :before 或 :after CSS 中更改 SVG 填充颜色

Question

我有一个这样的 SVG 图形：

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

当我将鼠标悬停在标签上时，我真的希望 SVG 更改填充颜色，而无需加载新的 SVG 文件，就像我现在所做的那样：

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

这是否可以使用我不知道的 JavaScript、jQuery 或纯 CSS 来实现？

谢谢。

Answer 1

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

 p:after { width: 48px; height: 48px; display: inline-block; content: ''; -webkit-mask: url(https://gh.max.ax/heart.svg) no-repeat 50% 50%; mask: url(https://gh.max.ax/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; }

 <p class="red">red heart</p> <p class="green">green heart</p> <p class="blue">blue heart</p>

您实际上并没有修改 SVG DOM 本身，您只是更改了背景颜色。 这样，您甚至可以使用图像或渐变作为背景。

---

更新

正如 MisterJ 所提到的， 遗憾的是，此功能并未得到广泛支持。

六年后，对前缀使用的支持率上升到了97% 。

Answer 2

使用content属性生成（非公开的）标记，其功能等同于 <img> 元素中的 svg。

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

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

类似的问题，但对于background-image here和here 。

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

Answer 3

一种类似于@lmaooooo 的回答的技术，无需设置display: inline-block 。 当您想要保留display: inline以确保:after内容不会换行到独立于前面的文本内容的新行时，这在措辞内容时很有用。

还使用剪辑路径来防止背景颜色在 Safari 中泄漏（这取决于图像/行高/等）。

 a[target="_blank"]:after { background-color: currentColor; content: ""; padding: 0 0.5em; margin: 0 0.125rem; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; clip-path: padding-box inset(0.28125em 0); }

 Lorem ipsum sumit dolar <a href="#" target="_blank">hello world</a>

Answer 4

还有另一种方法可以做到这一点。 您可以通过使用过滤器来实现它。

只需在内容中添加 svg url 并使用 hue-rotate 来更改颜色。

根据CanIUse所有流行的浏览器都支持它。

 p:after { width: 48px; height: 48px; content: url(https://gh.max.ax/heart.svg); } .red:after { filter: hue-rotate(14deg); } .green:after { filter: hue-rotate(120deg); } .blue:after { filter: hue-rotate(210deg); } .black:after { filter: grayscale(100%); }

 <p class="red">red heart</p> <p class="green">green heart</p> <p class="blue">blue heart</p> <p class="black">black heart</p>