Изменить цвет заливки SVG с помощью тега <use>не работает

Question

Я просто хочу изменить цвет заливки svg и цвет при наведении. Но я видел прикрепленный svg вот так:

<use xlink:href="#search-magnify"></use>

Я думаю, что это ссылка на svg где-то с сайта. Я просто хочу изменить цвет заливки без редактирования оригинального SVG. Поэтому я попытался обернуть его в span с классом и стилем таким образом.

.icon svg path{
  fill: red;
  color: red;
}

Но это не работает вообще. Вот скрипка .

Что мне здесь не хватает? Разве это не может быть достигнуто css?

Answer 1

При использовании команды <use> элементы SVG попадают в shadow DOM

. Прочитайте статью:
Стиль SVG-контента с CSS от Sara Soueidan

Shadow DOM похож на обычный DOM, за исключением того, что вместо того, чтобы быть частью основного поддерева документа, узлы в Shadow DOM принадлежат фрагменту документа, который в основном является просто другим поддеревом узлов, которые не являются столь же уязвимы для сценариев и стилей, как и обычные DOM-узлы. Это дает авторам возможность инкапсулировать и применять стили и сценарии при создании модульных компонентов. Если вы когда-либо использовали элемент видео HTML5 или тип входа диапазона и задавались вопросом, откуда взялись элементы управления видео или компоненты ползунка диапазона, то вы уже сталкивались с Shadow DOM раньше.

Поэтому добавьте наследование цвета для path

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}

Ниже приведен полный код

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}

<svg version="1.1" id="search-magnify" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="30%" height="30%" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>
        
<span class="icon">
 <svg class="icon-svg svg-search" width="15%" height="15%">
 <use class="sm" xlink:href="#search-magnify"></use>
 </svg>
</span>

Live Demo

Answer 2

Несколько замечаний:

1. В css вы стилизуете элемент использования, а не путь.

2. Здесь <use xlink:href="#search-magnify"></use> поиск -magnify должен быть идентификатором пути, а не идентификатором элемента svg

3. Вам также необходим viewBox для элемента svg, использующего путь

.icon svg use{
  fill: red;
}

<span class="icon">
 <svg class="icon-svg svg-search" viewBox="0 0 57 57" width="20" height="20">
 <use xlink:href="#search-magnify"></use>
 </svg>
</span> 


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path id="search-magnify" class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>