svg - 更改符号颜色 SVG 的一部分

Question

我有一个 SVG 符号，基本上是三个全黑笔画的路径。使用 use 标签在我的 SVG 文档中大量使用了这个符号。

有时我只想更改符号实例的一笔，例如颜色变化，我知道我使用“使用”来创建符号实例，如何使用 SVG+CSS 实现此目的。

Answer 1

这实际上是一个非常巧妙的技巧 http://codepen.io/FWeinb/blog/quick-tip-svg-use-style-two-colors , Fabrice Weinberg 在符号上使用了 fill="currentColor" 以便他以后可以使用 css 更改它。

<svg style="display:none;">
  <symbol id="test">
      <rect x="10" y="10" width="100" height="100" /> 
      <rect x="100" y="10" width="100" height="100" fill="currentColor" /> 
  </symbol>
</svg>

<svg class="icon icon--BlueBlack"><use xlink:href="#test" /></svg>
<svg class="icon icon--BlueGreen"><use xlink:href="#test" /></svg>

和

.icon--BlueBlack{
  fill:blue;
}

.icon--BlueGreen{
  fill:blue;
  color:green;
}