Как изменить цвет stroke в svg?

Question

[Oleg Urievich]

Есть svg спрайт,
в нем есть инонки вида

<symbol viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" id="menu">
    <path d="M6 24h36M6 12h36M6 36h36" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
  </symbol>

Вставляю нужную иконку таким образом

<svg className="icon">
          <use xlinkHref="/img/sprite.svg#menu" />
        </svg>

.icon {
        stroke: red
    }

Так не меняет

Как правильно изменить цвет stroke через css?

Comments

[Rustam Bainazarov]

Oleg Urievich, вы пробовали добавить так свойство:
stroke: red !important;?

У вас ведь stroke прописан как атрибут в path. Нужно его перезаписать, а при таком наследовании значение из атрибута имеет выше приоритет.

Ну или просто удалить этот атрибут вообще из разметки.

[Oleg Urievich]

Рустам Байназаров, удалил stroke из исходного спрайта. Теперь могу его писать в CSS, но это все-же не хорошо

Answer 1

[Максим]

Для того что бы заработало внутри use надо удалить все стилизации внутри symbol

Comments

[Oleg Urievich]

этот вариант мне подходит

Answer 2

[Henxed]

svg спрайт нужно встроить в html, файлом работать не будет, и через css просто менять параметр. Например:

#menu path{
  stroke: #000;
}

Comments

[Oleg Urievich]

зачем встраивать? работает и без встраивания.

[Rustam Bainazarov]

Почему это в случае с файлом работать не будет? Будет спокойно через #use ссылкой на внешний файл в Chrome, Opera, Firefox, Safari и с недавних пор в Edge.

С полифилом будет работать во всех современных и не очень браузерах (ссылка на внешний файл).

И все CSS-свойства будут работать тоже со вставленным таким образом SVG.

Не надо ничего никуда встраивать, это не кешируется тогда.

[Oleg Urievich]

Рустам Байназаров, даже с !important не работает. Могу изменять stroke только в самом спрайте. Так работает, через css не работает

[Rustam Bainazarov]

Oleg Urievich, скиньте ссылку, где это не работает.

Или песочницу сделайте. Хотя там, вроде, запрет будет из-за кросс-доменной политики на внешние файлы через #use.

[Ankhena]

файлом работать не будет

Будет, конечно

Только атрибут надо убрать из самого svg либо перебивать important'ом.