Имеется обычный circle
И так же имеется желание увидеть плавность смены fill
, который назначены через переменные типа var(--color)
при использовании в use
Про shadow dom
знаю и по этому поводу объяснений не надо а хочу увидеть способ плавной смены fill
В Firefox отрабатывает шикарно и больше нигде...
Сам пример вопроса:
svg {
--color: red;
}
circle {
transition: 0.34s linear;
}
svg:hover {
--color: blue;
}
<svg width="0" height="0">
<symbol viewBox="0 0 20 20" id="c">
<circle cx="10" cy="10" r="10" fill="var(--color)">
</symbol>
</svg>
<svg width="50px"><use xlink:href="#c" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon" x="0" y="0" class="icon"/>
</svg>