Change More SVG Path Color When Hover

I have this code below. 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 rem

Solution 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>

Solution 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.