仅在Firefox中使用CSS设置SVG路径样式

我正在尝试设计SVG的特定路径，它在firefox中可以正常工作，但在其他浏览器中不行

SVG精灵

  <symbol id="interface-feedback" viewBox="0 0 1219 1024">
      <title>feedback</title>
      <path class="path1 fill-color2" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379z"></path>
      <path class="path2 fill-color1" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379zM609.382 51.791c-307.415 0-557.483 184.478-557.483 411.213 0.072 90.859 39.605 177.023 114.335 249.351 39.964 38.422 15.878 112.758-7.419 184.657-7.67 23.656-15.519 47.885-19.928 67.956 20.071-8.315 48.53-22.401 71.397-33.727 71.504-35.412 145.948-71.54 185.087-65.447 35.985 5.52 174.657 8.53 214.047 8.53 307.308 0 557.34-184.514 557.34-411.32-0.036-226.735-250.068-411.213-557.376-411.213z"></path>
      <path class="path3 fill-color1" d="M437.485 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path>
      <path class="path4 fill-color1" d="M661.675 459.599c0 28.663-23.477 51.899-52.437 51.899s-52.437-23.236-52.437-51.899c0-28.663 23.477-51.899 52.437-51.899s52.437 23.236 52.437 51.899z"></path>
      <path class="path5 fill-color1" d="M886.081 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path>
    </symbol>

---

您可以设置符号定义的样式，但不能设置由

生成的特定实例的样式。这是一条SVG规则。正如Robert所说，FF行为是一个bug

如果您可以使用变化的单一颜色，那么您可以使用

currentColor

技术

为填充设置使用

currentColor

的路径会告诉它使用CSS属性

color

在实例化时有效的任何值

这意味着你可以改变悬停时的颜色，符号也会得到。如下面的演示所示

/*设置符号定义的样式*/
.path1{
填充：#fff；
}
.path2、.path3、.path4、.path5{
/*告诉这些路径使用“颜色”的当前值作为填充*/
填充：当前颜色；
}
/*定义将由符号实例“继承”的颜色*/
.接口反馈{
颜色：#ccc；
}
.界面反馈：悬停{
颜色：蓝色；
}
/*另一种颜色来证明他们是独立的*/
.接口反馈2{
颜色：青柠；
}

反馈

FF是迄今为止唯一支持

use

元素中的子元素样式的浏览器。我认为这是一个实验性的选择。好吧，但是没有脚本可以做到这一点吗？本质上看这个问题-@Paulie_D它不是一个实验性的选择，它是一个bug。小心写任何依赖它的东西。

<svg class="icon interface-feedback"><use xlink:href="#interface-feedback"></use></svg>

.interface-feedback .path2,.interface-feedback .path3, .interface-feedback .path4, .interface-feedback .path5{
        fill:#ccc;
}

.interface-feedback .path1{
        fill:#fff;
}