Css 我需要一个svg图标的多个实例

我有一个svg图标。我在文件中插入了这样的内容

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

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

---

提前谢谢。

请在这里检查答案

---

我认为您应该在SVG中使用

g

或

symbol

创建一个引用，然后

根据需要使用它，为每种颜色创建一个类

它取决于您正在使用的项目来为其填充或笔划上色，如果您必须选择一条路径、一个圆或任何东西，也取决于此。您可以选择整个对象
.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>


.greenfill{fill:#569e26；}
.redfill{fill:red；}
您应该以实际的svg元素为目标，而不是img标记-如果您在文本编辑器/ide中打开svg，您可以在那里添加类，然后使用codePer Darren更改它们，您可以共享您的svg结构吗？在sublime这样的文本编辑器中打开它。这将选择所有具有路径的svg。可能不是最明智的解决方案。多个实例更新请检查答案。
.greenfill { fill:#569e26;}

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

svg path {
    fill: yellow !important;
}

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