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

【问题标题】：Change SVG fill color in :before or :after CSS在 :before 或 :after CSS 中更改 SVG 填充颜色
【发布时间】：2014-02-25 21:55:16
【问题描述】：

我有一个这样的 SVG 图形：

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

当我将鼠标悬停在标签上时，我真的希望 SVG 改变填充颜色，而不像现在这样加载新的 SVG 文件：

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

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

谢谢。

【问题讨论】：

无法通过 JavaScript 处理 :before 和/或 :after 伪元素。它们不存在于 DOM 中。
不确定，但也许this 会帮助你

标签： javascript jquery css svg pseudo-element

【解决方案1】：

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

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://mmathys.github.io/heart.svg) no-repeat 50% 50%;
  mask: url(https://mmathys.github.io/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 所说，this feature is sadly not widely supported.~~

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

【讨论】：

我认为您应该更新以支持此方法 (caniuse.com/#feat=css-masks) 如果您想使用此方法，您需要放弃一些浏览器。
实际上甚至低于 88%。浏览器中的部分支持不支持您正在使用的功能。例如 Firefox 不支持它。
效果很好，您可以回退到内容属性中的 Unicode 符号（或使用 fontawesome）
content:'' 似乎没有必要。
@coops 很高兴我能帮助到别人 :)

【解决方案2】：

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

还使用 clip-path 来防止背景颜色在 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 &lt;a href="#" target="_blank"&gt;hello world&lt;/a&gt;

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：