我尝试设置SVG的特定路径，它在firefox中运行正常，但在其他浏览器中它没有。
SVG SPRITE
<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
<svg class="icon interface-feedback"><use xlink:href="#interface-feedback"></use></svg>
CSS
.interface-feedback .path2,.interface-feedback .path3, .interface-feedback .path4, .interface-feedback .path5{
fill:#ccc;
}
.interface-feedback .path1{
fill:#fff;
}
答案 0 :(得分：1)
您可以设置符号定义的样式，但不能设置<use>生成的特定实例的样式。这是一个SVG规则。正如罗伯特所说，FF行为是一个错误。
如果您可以使用改变的单一颜色，那么您可以使用currentColor技术。
为其填充设置使用currentColor的路径会告诉它使用在实例化时生效的CSS属性color的任何值。
这意味着你可以在悬停时改变颜色，符号也会得到。如下面的演示所示。
/* style the symbol definition */
.path1 {
fill:#fff;
}
.path2, .path3, .path4, .path5 {
/* tell theese paths to use the current value of "color" as their fill */
fill: currentColor;
}
/* define the color that will be "inherited" by the symbol instance */
.interface-feedback {
color: #ccc;
}
.interface-feedback:hover {
color: blue;
}
/* another color to prove they are independent */
.interface-feedback2 {
color: lime;
}<svg width="0" height="0">
<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>
<svg class="icon interface-feedback"><use xlink:href="#interface-feedback"></use></svg>
<svg class="icon interface-feedback2"><use xlink:href="#interface-feedback"></use></svg>