更改部分符号颜色SVG

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

---

有时我只想更改符号实例的一个笔划，如颜色变化，我如何使用SVG+CSS实现这一点，因为我知道我使用了“use”来创建符号实例。

根据use元素上的SVG 1.1规范：

“use”元素的效果就像引用的 元素被深入克隆到一个单独的非公开DOM树[…] SVG DOM不会将被引用元素的内容显示为 “使用”元素的子元素

这意味着通过遍历DOM树无法访问引用的元素子元素。随着规范的发展，这也适用于通过css选择器进行访问：

CSS2选择器无法应用于（概念上）克隆的DOM树 因为它的内容不是正式文档结构的一部分

---

这是可能的。您不能直接使用CSS设置取消引用的符号内容的样式。但是您可以设置父元素

的样式，并将该颜色继承到符号中。有关示例，请参见以下问题的答案

---

这实际上是一个非常巧妙的技巧，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>

---

你基本上不能。是相同的副本。克隆它，如果没有，则调整克隆。这是一个巧妙的技巧。但是如果我做对了，这只适用于属性

color

和

fill

，对吗？此外，每个

每个属性只能改变一种颜色。

.icon--BlueBlack{
  fill:blue;
}

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