在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://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;
}

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

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

更新

正如MisterJ所提到的,遗憾的是这个功能得不到广泛支持.

三年后,对前缀使用的支持率已上升至89%.

Answer 2

使用该content属性在功能上生成(非暴露)标记,与<img>元素中的svg相同.

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

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

类似的问题,但在background-image 这里和这里.

所以,要做你想做的事,你必须以某种方式绕过两点.这样做有多种选择,例如使用内联svg,使用过滤器(应用于<img>)或生成不同的svg文件(或数据URI),如问题所示.

Answer 3

类似于@lmaooooo's 答案的技术，无需设置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 <a href="#" target="_blank">hello world</a>

Answer 4

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

只需在内容中添加 svg url 并使用色调旋转来更改颜色。

根据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>