html - 当你的 svg 在 "content: url(..)"时如何转换填充颜色

Question

我想做的是使用 CSS 转换来更改“content: url(..)”中 svg 的填充颜色，而不是完全替换图像。

HTML:

<h3>Hello World</h3>

CSS

body: { background-color: #121212; }

h3:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#013963;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>');
  display: block;
  transition: all .25 ease-in;
}

h3:hover:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#f6f6f6;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>');
}

Here's my codepen

Answer 1

简短的回答是你不能，抱歉。

更具体地说，您不能跨文档边界设置 svg 图像的样式。您只能设置内联 svg 的样式。您的方法的问题是，内容属性不允许您将内容插入或内联到页面中。您在那里所做的基本上是创建一个“影子”img 标签，因此有关 img 标签中 svg 的限制也适用于此。

SO 上已经有该问题的答案。参见示例:

• > Change foundation svg color on hover
• > img src SVG changing the fill color

您确实有多种选择来解决您的问题。您可以内联您的 svg 内容并像往常一样设置样式。

然而，有一个巧妙的小技巧大多数人都不知道；那就是 currentColor 关键字的使用。有了它，您可以使用 color 属性在任何父元素上继承 css 设置的当前颜色，并在任何其他接受颜色的属性中使用它。在示例中，我使用 h3 元素的颜色作为第一个圆圈的填充颜色。

这种方法的优点是不需要任何关于 svg 结构的知识，如果制作精良的话......

svg {
  height: 1em;
}
h3 {
  color: red;
  transition: all 0.5s
}
h3:hover {
  color: green
}

<h3>Hello 
  <svg viewBox="0 0 100 100" width="1em" >
    <circle cx="50" cy="50" r="45" fill="currentColor"/>
    <circle cx="30" cy="50" r="25" fill="white"/>
  </svg>
</h3>

其他帖子中建议的另一种方法是使用网络字体。 如果您使用字体，您所做的就是通过 content 属性插入文本。然后可以设置此文本的样式，包括使用您的字体。

@font-face {
  font-family: 'ean13_font';
  src: url('https://cdn.rawgit.com/Holger-Will/ean13-font/master/fonts/ean13.woff')
}
h3 {
  color:red;
  transition: all 0.5s;
}
h3:after {
  content: '_1*L2L3G4L5G2G3**R4R3R2R5R8*';
  font-family: 'ean13_font';
  font-size: 120px;
  font-weight: 200;
}
h3:hover {
  color: green;
}

<h3>Hello</h3>

另一种方法是使用 js 来插入、动画或更改您的 svg。我不会在这里详细介绍，因为我认为 js/jquery 解决方案不是很优雅...