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

Question

我正在尝试为 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;
}

Answer 1

您可以为符号定义设置样式，但不能为 <use> 生成的特定实例设置样式.这是一个 SVG 规则。正如罗伯特所说，FF 行为是一个错误。

如果您可以接受会变化的单一颜色，那么您可以使用 currentColor技术。

设置要使用的路径 currentColor因为它的 fill 告诉它使用 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>