悬停时更改更多 SVG 路径颜色

Question

I have this code below.

 .icon {stroke-width: 0; stroke: currentColor; fill: currentColor;} a {color: red} a:hover {color: pink} a:hover circle {fill: green !important; color: orange} a:hover path {fill: blue !important}

 <a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a> ... <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="team" viewBox="0 0 123 123"> <circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/> <path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/> <circle fill="#ccc" cx="103.3" cy="12.2" r="12.1"/> <path fill="#000" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/> <path fill="#553" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/> <circle fill="f00" cx="61.4" cy="26" r="13.9"/> </symbol> </defs> </svg>

It's SVG file with more colored layers and I want to set different color to each layer on hover.

I tried to remove fill="..." in HTML markup, tried to remove fill attribute, add class/id to SVG layers set color , fill in CSS.

But no result, I'm able to change just one color to all layers which haven't fill attribute, or have fill="currentColor" in HTML.

Any ideas?
Thanks.

Answer 1

Maybe with some CSS variables. You cannot target elements inside the use but you can rely on inheritance to pass some values.

 .icon { stroke-width: 0; stroke: currentColor; fill: currentColor; } a { color: red } a:hover { color: pink; --s1:green; --s2:blue; --p1:purple; --p2:yellow; }

 <a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="team" viewBox="0 0 123 123"> <circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/> <path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/> <circle style="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/> <path style="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/> <path style="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/> <circle style="fill:var(--s2,#f00)" cx="61.4" cy="26" r="13.9"/> </symbol> </defs> </svg>

Answer 2

(Answer below posted based on this marked-as-a-duplicate question , not the above question.)

I decide to write my SVG markup as if <use ... > didn't impose a shadow DOM barrier on the content being used, then got rid of the shadow DOM like this:

  private removeSignalMeterShadowRoots(): void {
    const signalMeter = $('#signal-meter');
    const markup = signalMeter.html();
    const uses = $('use[href="#signal-meter"]');

    uses.parent().html(markup);
  }

...with signal-meter being the id of a symbol I wanted to re-use multiple times, while freely applying CSS classes for styling both colors and other attributes as if the shadow DOM weren't there.

This same code could be easily adapted to automatically handle multiple symbols or all symbols.