Question

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

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

Answer 1

这实际上是一个非常巧妙的技巧http://codepen.io/FWeinb/blog/quick-tip-svg-use-style-two-colors，Fabrice Weinberg在这里使用符号上的 fill =＆＃34; currentColor＆＃34; ，这样他以后可以使用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;
}

Answer 2

根据使用元素的SVG 1.1规范：

'use'元素的效果就好像引用的内容一样元素被深深地克隆到一个单独的非暴露DOM树[...] SVG DOM不会将引用元素的内容显示为 “使用”元素的孩子。

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

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

Answer 3

有可能。您不能直接使用CSS设置解除引用的符号内容的样式。但是您可以设置父<use>元素的样式，并将该颜色继承到符号中。有关示例，请参阅以下问题的答案。

How to style one particular SVG path in CSS?

更改符号颜色SVG的一部分

3 个答案: