Измените больше цвета пути SVG при наведении

Question

У меня есть этот код ниже.

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

Это файл SVG с более цветными слоями, и я хочу установить разные цвета для каждого слоя при наведении.

Я пытался удалить fill="..." в HTML разметке, попытался удалить атрибут fill, добавить class / id в набор слоев SVG color, fill в CSS.

Но безрезультатно, я могу изменить только один цвет для всех слоев, которые не имеют атрибута fill или имеют fill="currentColor" в HTML.

Есть идеи?
Спасибо.

Answer 1

(Ответ ниже опубликован на основе этого вопроса с пометкой «как дубликат» , а не вышеуказанного вопроса.)

Я решил написать свою SVG-разметку , как если бы <use ... > не накладывал теневой барьер DOM на используемое содержимое, а затем избавлялся от теневого DOM следующим образом:

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

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

... с signal-meter будучи id из symbol Я хотел использовать повторно несколько раз, в то же время свободно применяя CSS классы для стилизации как цветов, так и других атрибутов, как если бы там не было теневого DOM.

Этот же код можно легко адаптировать для автоматической обработки нескольких символов или всех символов.

Answer 2

Может быть, с некоторыми CSS переменными. Вы не можете нацеливать элементы внутри use, но можете полагаться на наследование для передачи некоторых значений.

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