Стилизация SVG с помощью CSS?

Есть SVG-икнока вот с такой структурой:
< symbol>
< path class='bg'>
< path class='icon'>
< /symbol>

С помощью CSS задаю прозрачность классам, в зависимости от состояния (ховер), вот пример:
https://jsfiddle.net/yr0rd57b/2/
Почему-то работает в Firefox и не работает в Safari, Opera (возможно и в других браузерах тоже).

Как починить или посоветуйте, может, как-то по-другому организовать иконку? А, да! Еще transition-эффект обязательно должен работать, из-за этого и структура иконки такая получилась.
  • Вопрос задан
  • 602 просмотра
Решения вопроса 1
@Mopkoff-ka
Попробуйте вставлять svg не ссылкой, а напрямую: <a><svg>...</svg></a>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Raxen
@Raxen
TechLead Frontend Developer, Beeline
Не знаю, насколько вам это поможет, но в этой статье пишут, что на данный момент мы не можем напрямую обращаться к Shadow DOM через CSS, это поддерживается не всеми браузерами (Хромиум например не поддерживает)

Еще тут немного об этой проблеме

И да, эта бага уже заведена в chromium баг трекере - линк
Может когда-нибудь поправят.

И есть рабочий пример, не вдавался в тонкости, но попробуйте препарировать
Ответ написан
@dendinis
CSS - используется для стилизации
для всего ост. js
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы