Как сделать непрозрачность для сложных svg фигур?

Question

[Genri_Rus]

Вот: https://jsfiddle.net/Genri_Rus/4c5wgLaj/3/

Нужно при наведении на меленькие кружочки сделать их непрозрачными, при этом основной круг должен быть белым

Как такое можно сделать ?

Answer 1

[Kovalsky]

Codrops спешат на помощь!

Comments

[Genri_Rus]

Спасибо
А в моем случае пример не покажите ?

[Rustam Bainazarov]

Genri_Rus, фух, ну что же такое. Даже обидно, что я столько писал в прошлом вопросе. Я тебе даже пример привёл. Через #use когда вставляешь, все эти манипуляции имеют ограничения, и работает это только в Firefox. Зачем ж ты по новой? :(

[Genri_Rus]

Рустам Байназаров, мне нужно было transparent

В той теме мы говорили про svg спрайты, т.е. ваш вариант улучшает их вывод, там немного другая история )

[Kovalsky]

Рустам Байназаров, позвольте дое*аться: use+xlink не так ограничивают возможности стилизации чтобы можно было говорить что это работает только в фф. По крайней ставлю руку на кон что я справлюсь с задачей в любой возможной ее форме, лол.

Но в целом я согласен, это обидно когда не читают твои ответы.

[Rustam Bainazarov]

Никита Полевой, я про стилизацию через CSS. Я уже приводил пример, что это не работает в Chrome. Я про правила типа svg:hover .class {}.

[xonar]

Рустам Байназаров, Тут надо короче объяснять таким людям кажись) Например, если подтягиваешь svg через use из вне, то хрен тебе, а не непрозрачные кружочки, хочешь кружочки, то вставляй прям в html инлайном весь свой svg, а не из вне.

[Rustam Bainazarov]

xonar, я это уже предлагал.

[Rustam Bainazarov]

Никита Полевой, при использовании #use CSS на :hover не работает в Chrome с такой конструкцией, а в Firefox работает:


Это и есть ограничения стилизации через #use.

[Genri_Rus]

Рустам Байназаров, короче я извиняюсь

Я немного другой эффект хотел видеть, но это больше вопросы к свойству transparent, а не к коду svg и всем ньюнсам его подключения в целом

P.S. В той теме вы мне очень сильно помогли, спасибо