1

Можно ли менять цвет 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 и поменять цвет.

9
  • @Дмытрык Нет, не дубликат. В вопросе по вашей ссылке SVG добавлялся <img> Поэтому стилизация Была невозможна, только через фильтры CSS SVG 16 мар 2021 в 16:32
  • @Дмытрык нет и background нет | только object и iframe позволяют менять стили 16 мар 2021 в 16:39
  • @Alexandr_TT, Ну, так почему не дубликат? Только из-за того, что топик содержит 2 вопроса,а не 1?
    – Dmytro
    16 мар 2021 в 16:39
  • @Дмытрык ну вы уже дали ссылку на свой топик, ещё что-то нужно? 16 мар 2021 в 16:40
  • 2
    Сделайте полноценный элемент. Зачем специально мучаться и создавать какие-то костыли вокруг этого. Так можно хотеть в пробел вставить документ. Если уже скрипты пошли в ход (в ответе), то элемент можно воткнуть скриптом, если уж нужна чистота тега в темплейте.
    – user347472
    16 мар 2021 в 16:57

1 ответ 1

2

Как мне добавить в 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>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.