不同上下文中<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>

演示/游乐场

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

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