更改符号颜色SVG的一部分

问题描述

我有一个SVG符号，基本上是三个全黑笔划的路径.使用 use 标签在我的SVG文档中经常使用此符号.

I have an SVG symbol, basically three paths with an all black stroke. This symbol is used heavily across my SVG document using the use tag.

有时候，我只想更改符号实例的一个笔触，例如颜色变化.知道我曾经使用过"use"来创建符号实例，如何使用SVG + CSS来实现呢?

Sometimes i just want to change only one stroke of the instances of the symbol, like color variations, How can i achieve this using SVG+CSS, knowing that I used 'use' to create the symbol instances.

推荐答案

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

This actually is a very neat trick http://codepen.io/FWeinb/blog/quick-tip-svg-use-style-two-colors, Fabrice Weinberg here is using fill="currentColor" on the symbol so he can change it later using 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;
}

这篇关于更改符号颜色SVG的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！