用于<；的SVG自定义CSS样式；使用>；不同语境中的元素 在Firefox中，基于其父类设计元素的样式是可行的，但在Google Chrome/Safari中则不然。如何以跨浏览器的方式实现这一点？ SCSS HTML

在演示中添加了元素，但它只是一个svg元素，有两个路径，每个路径都有一个类名

<div class="column-1">
    <svg><use xlink:href="#icon-usp_return"></use></svg>
  </div>

  <div class="column-2">
    <svg><use xlink:href="#icon-usp_return"></use></svg>
  </div>

示范/游乐场

---

您可以使用SVG中的路径样式，只需将其添加到每个路径标记：

style="fill: var(--cls-1)"

然后为SVG标记设置一个类，如下所示：

<svg class="icon1"><use xlink:href="#icon-usp_return"></use></svg>

可以在这里找到完整的工作示例：

您可以将

fill=“currentColor”

添加到SVG的第二个路径

然后在css文件中，您可以编写：

.column-1 {
  use {
    fill: red;
    color: blue;
  }
}

.column-2 {
  use {
    fill: green;
    color: orange;
  }
}

下面是一个基于您的代码的工作示例：

---

我想不起规格，但我认为这只是FF领先于Chrome的地方。当然，FF已经加入了IIRC。@Paulie_对如何实现类似的跨浏览器功能有什么想法吗？不是特别的。不确定这是否完全正确，但它很有用-这是一个很好的解决方案，不幸的是没有IE支持，甚至没有最新的…：（是的，不幸的是IE或Edge中不支持CSS变量：是的，但这是一个幸运的例子，我只有两条路径，但这只是我的幸运例子，我需要更多的路径。

.icon1 {
  --cls-1: red;
  --cls-2: green;
}

.column-1 {
  use {
    fill: red;
    color: blue;
  }
}

.column-2 {
  use {
    fill: green;
    color: orange;
  }
}