我需要单个 svg 图标的多个实例答案

【问题标题】：I need multiple instance of single svg icon我需要单个 svg 图标的多个实例
【发布时间】：2017-05-18 19:25:49
【问题描述】：

我有一个 svg 图标。我已经像这样插入到文档中，

<img src="../assets/layouts/layout3/svgs/star-def.svg"  
width="15" height="15" />

它正确显示没有问题，但我想要的是，它需要改变颜色，简而言之，我需要使用 css 的同一个图标的多个颜色变体。意味着，我可以更改类和图标应该变成那种颜色。我尝试使用，填充，但它没有发生。我的 html 和 css 下面添加了填充。

html:-

<img src="../assets/layouts/layout3/svgs/star-def.svg" class="greenfill" 
    width="15" height="15" />

&css

.greenfill { fill:#569e26;}

注意我已经在编辑器中打开了文件并从那里更改了填充颜色并有一个不同颜色的图标，但我不想要这个。

提前致谢。

【问题讨论】：

您应该针对实际的 svg 元素，而不是 img 标签 - 如果您在文本编辑器/ide 中打开 svg，您可以在其中添加类，然后使用您的代码更改它们
Per Darren，你能分享一下你的 SVG 结构吗？在 sublime 之类的文本编辑器中打开它。

标签： css svg

【解决方案1】：

请在此处查看答案

http://jsfiddle.net/wuSF7/462/

svg {
    width: 350px; height: 350px;
}

svg path {
    fill: yellow !important;
}

【讨论】：

这会选择有路径的 all svg。可能不是最明智的解决方案。
多实例更新jsfiddle.net/wuSF7/1574请查看答案。

【解决方案2】：

我认为您应该在 SVG 中使用 g 或 symbol 创建一个引用，然后使用 use 为每种颜色创建一个您需要的时间。

这取决于您正在处理的项目来为其填充或描边着色，如果您必须选择一个圆形或其他任何路径，则相同。您可以选择整个对象.greenfill{fill:#569e26;} 或每个子元素.greenfill g rect{fill:#569e26;}。

<svg>
  <style>
    .greenfill{fill:#569e26;}
    .redfill{fill:red;}
  </style>
  <defs>
    <g id="star-def"><!-- ... --></g>
  </defs>

  <use xlink:href="#star-def" class="greenfill" />
  <use xlink:href="#star-def" class="redfill" />
  <!-- ... -->

</svg>

【讨论】：