Question

我有单个svg图标。我已经在文档中插入了这样的内容，

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

它显示没有问题，但我想要的是，它需要改变颜色，简而言之，我需要使用css的相同图标的多个颜色变体。意思是，我可以改变班级＆amp;图标应该成为那种颜色。我尝试使用，填充，但它没有发生。我的HTML和css下面添加填充。

html： -

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

＆安培; CSS

.greenfill { fill:#569e26;}

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

提前致谢。

Answer 1

请在这里查看答案

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

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

svg path {
    fill: yellow !important;
}

Answer 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>

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

2 个答案: