Styling SVG path with CSS only working in Firefox

Question

I'm trying to style specific paths of an SVG, it works ok in firefox, but in other browsers it doesn't.

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

You can style the symbol definition, but not the specific instance generated by the <use>. That's an SVG rule. As Robert said, the FF behaviour is a bug.

If you can live with a single color that changes, then you can use the currentColor technique.

Setting a path to use currentColor for it's fill tells it to use whatever value of the CSS attribute color that was in effect at the time it was instanced.

So that means you can change the color on hover, and the symbol will get that also. As demonstrated in the demo below.

/* 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>