Почему не работает transition на svg use?

Question

[Алекс]

Столкнулся с проблемой что transition не работает на иконках которые вставляются с помощью use. Можно ли как то обойти это?

Пример

Answer 1

[Rustam Bainazarov]

Это можно обойти, но только так и только для fill корневого SVG. В данном случае это будет работать как надо:


В Firefox работает нормально стилизация всей структуры SVG через use. Но только в Firefox.

Comments

[Максим]

я не понял о каком эффекте речь - о чём этот вопрос ?

[Алекс]

Максим Ленский, не работает свойство transition если иконка вставляется с помощью use, а цвет задавать через переменную, например --color: #fff. В вопросе прикреплен пример

[Максим]

Алекс, а если use присвоить class ?

[Алекс]

Максим Ленский, не совсем понял что вы хотите этим добиться. В вопросе есть пример можете поэкспериментировать)

[Максим]

Алекс, дело в том что в FF есть транзишен а в Хроме не смотрел

[Алекс]

Максим Ленский, воу, и вправду всё работает как надо. (проверил в других браузерах работает только в FF)

[Максим]

Алекс, вот видите, я поэтому и не понял проблему, так как не пользуюсь другими браузерами

[Rustam Bainazarov]

Алекс, в Firefox даже работает нормально стилизация структуры SVG через use. Но только в Firefox.

[Максим]

Рустам Байназаров, из за этого я хром бросил , хром напичкали эксперементалками из за чего люди теряют стандарты которые написал w3

[Алекс]

Максим Ленский, сам то могу хоть куда перейти) но пользователей много и сидят они не только в FF, а нужно везде и одинаково)

[Максим]

Алекс, class сделайте и получится class:hover newcolor

[Алекс]

Максим Ленский, не работает

[Максим]

Алекс, момент - я проверю - и напишу в любом случае - хоть в провальном хоть в успешном

[Максим]

Алекс, действительно так - и именно в Хром ...

[Алекс]

Максим Ленский, Вы пытались)

[Максим]

Алекс, я поработаю над этим - поглядывай сюда иногда

[Максим]

Алекс, https://ru.stackoverflow.com/a/1112935/308951 - смотри

[Алекс]

Максим Ленский, Рустам Байназаров как раз в этой ветке и привел данное решение. Оно хорошее, но если у меня иконка состоящая из нескольких path и у одного path должен быть один цвет, для другого - другой, то данный подход не работает как надо, поэтому данная реализация не подходит для меня( у меня как раз по коду примерно так

<svg>
    <path fill="var(--color1)" d="...">
    <path fill="var(--color2)" d="...">
</svg>

[Максим]

Алекс, вы сами же скрываете настоящее условие а потом вываливаете совсем другое

[Алекс]

Максим Ленский, скрывать намеренно не собирался, да и пример как раз такой же у меня в вопросе. (скорее просто не явно указано было, что n элементов и у каждого свой цвет)

[Максим]

Алекс, пишите вопрос на SO с полным кодом