Не работает transition в svg inline use при использовании переменной?

Question

[liltrill]

Я использую такой код:

<svg class="svg svg_ex-1">
     <use href="sprite/sprite.svg#bit"></use>
</svg>

<symbol id="bit" viewBox="0 0 24 24">
    <path fill="var(--ex-1)" style="transition: 0.4s;" d="long..."/>
</symbol>

:root {
  --ex-1: #ffbd23;
}

&_ex-1 {
    width: 50px;
    height: 50px;

    &:hover {
      --ex-1: #ff6885;
    }
  }

Если не использовать use то все работает отлично, а при использовании use происходит смена цвета без transition. Как заставить анимироваться через переменные?

p.s Простым наследованием fill от use работает плавно с transition, но с переменными нет.

Answer 1

[Moskus]

https://stackoverflow.com/questions/51395179/svg-f...

Когда вы используете use, вы изолируете svg от DOM.

Comments

[liltrill]

Это понятно, но если сделать так:

use {
   fill: #color;
}

То анимация будет работать

[liltrill]

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

[Rustam Bainazarov]

liltrill, не обижайтесь на них. Сам механизм #use не так давно стал поддерживаться нормально. И у него до сих пор много ограничений. Как и CSS-переменные, кстати.

Например, вот так будут работать transition с CSS-переменными и через #use:



Потому что мы вывели переменную на уровень, доступный через DOM. Но извнутри, inline-путём, когда они объявлены внутри #use, они не будут работать. Ибо от DOM они изолированы. К тегу use через CSS обращаться не надо, надо обращаться к тегу SVG, кстати.

[liltrill]

Рустам Байназаров, Спасибо за совет про use), жалко что переменные не работают как currentColor, но я нашел выход, фильтрами и прозрачностью цвет убирать у иконки под дизайн, и тогда можно использовать иконки с цветом больше 2 и анимированно насыщать их цветом при наведении :)

Answer 2

[liltrill]

Вообщем, я так понял браузерам очень лень делать такую реализацию по неизвестным мне причинам, так как с 2016 года работает пример с currentColor - переменная текущего цвета и анимация срабатывает отлично, но кастомные переменные идут мимо, по не понятным мне причинам. Максимальное количество анимированных изменений цветов это 2. Кастомные переменные будут без анимации. Обидно немножко.