Question

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

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

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

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

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

感谢。

Answer 1

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

＆＃13;

$(document).on 'hidden.bs.modal', "#newProject", ->
  document.getElementById("<ID>").outerHTML=''
  delete element

＆＃13;

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;
}

＆＃13;

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

更新

~~正如MisterJ所说，this feature is sadly not widely supported。~~

<击>

三年后，对前缀使用的支持已升至93%。

Answer 2

使用content属性在功能上生成（非暴露）标记，与＆lt; img＆gt;中的svg相同。元件。

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

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

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

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

Answer 3

一种类似于 @lmaooooo's answer 的技术，无需设置 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>

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

3 个答案:

更新