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

Question

[Максим Кореев]

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

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

Как починить или посоветуйте, может, как-то по-другому организовать иконку? А, да! Еще transition-эффект обязательно должен работать, из-за этого и структура иконки такая получилась.

Answer 1

[Mopkoff-ka]

Попробуйте вставлять svg не ссылкой, а напрямую: <a><svg>...</svg></a>

Comments

[Максим Кореев]

очень не хотел так делать, но другое решение так и не нашлось ((( единственное, что добавил - библиотеку iconic/svginjector для удобства

Answer 2

[Роман Дворянов]

Не знаю, насколько вам это поможет, но в этой статье пишут, что на данный момент мы не можем напрямую обращаться к Shadow DOM через CSS, это поддерживается не всеми браузерами (Хромиум например не поддерживает)

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

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

И есть рабочий пример, не вдавался в тонкости, но попробуйте препарировать

Comments

[Максим Кореев]

да, читал подобное на хабре, там даже как-то обошли это (смогли то ли два, то ли три цвета покрасить с помощью css). но вдруг есть решение?

[Роман Дворянов]

MAXiDROME: Как-то так - https://jsfiddle.net/8qvLohvb/

[Роман Дворянов]

MAXiDROME: или даже так https://jsfiddle.net/8qvLohvb/2/

[Максим Кореев]

не то. во-первых, белый цвет, вместо прозрачности, во-вторых, размер меняется.

Answer 3

[dendinis]

CSS - используется для стилизации
для всего ост. js