Можно ли менять цвет SVG при добавлении в :after или :before?

Question

Можно ли менять цвет stroke и fill в SVG файле обращаясь к нему через CSS? Допустим я подключил SVG вот так:

.mame:after {
  content: url(name.svg);
}

При наведении мне нужно что-бы менялся fill или stroke этого файла. Если добавлять SVG через HTML, это делается легко. Но можно ли сделать что-то такое:

.mame:hover.mame:after {
  fill: #484848;
}

Думаю сама идея бредовая, но вдруг есть какие-то способы. Или второй вариант. Как мне добавить в after SVG элемент такого вида:

<svg xmlns="http://www.w3.org/2000/svg" width="23.001" height="22.999" viewBox="0 0 23.001 22.999">
  <path data-name="Объединение 6" d="M-9940,18V8h-10V5h10V-5h3V5h10V8h-10V18Z" transform="translate(9950.001 4.999)" fill="#EB653E"/>
</svg>

Так я легко смогу обратиться к fill и поменять цвет.

Answer 1

Как мне добавить в after SVG элемент такого вида:

Легко и непринуждённо.

#demo::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.001' height='22.999' viewBox='0 0 23.001 22.999'%3E%3Cpath data-name='Объединение 6' d='M-9940,18V8h-10V5h10V-5h3V5h10V8h-10V18Z' transform='translate(9950.001 4.999)' fill='%23EB653E'/%3E%3C/svg%3E");
}

<div id="demo"></div>

Для этого давно уже заботливыми руками написан правильный перекодировщик.

БЛОГ НА HUSL

Можно ли менять цвет SVG при добавлении в :after или :before?

Ответы (1 шт):