不同上下文中{use>元素的SVG自定义CSS样式

Question

在Firefox中，基于它的父类设置<use>元素的样式是有效的，但在Google Chrome / Safari中没有。如何以跨浏览器方式实现此目的？

SCSS

.column-1 {
  .cls-1 {
    fill: red;
  }
  .cls-2 {
    fill: green;
  }
}

.column-2 {
  .cls-1 {
    fill: blue;
  }
  .cls-2 {
    fill: yellow;
  }
}

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>

DEMO /游乐场

http://codepen.io/anything/pen/kXKZNP?editors=1100

Answer 1

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

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

然后将类设置为SVG标记，如下：

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

最后定义你的CSS：

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

可以在此处找到完整的工作示例：http://codepen.io/westefan/pen/grNvoy

Answer 2

您可以将fill="currentColor"添加到SVG的第二条路径。

然后在你的css文件中你可以写：

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

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

以下是基于您的代码的工作示例：

<强> https://jsfiddle.net/08hk886w/