Не работает transition смены цвета при :hover в google chrome

Question

Имеется обычный 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>

Answer 1

Получилось менять цвет у <use, если это интересно..

svg {
  --color: red;
}

use {
  transition: 0.34s linear;
  fill : var(--color);
}

svg:hover {
  --color: blue;
}

<svg width="0" height="0">
  <symbol viewBox="0 0 20 20" id="c">
    <circle cx="10" cy="10" r="10" />
  </symbol>
</svg>

<svg width="50px"><use xlink:href="#c" /></svg>

Answer 2

CSS.registerProperty({
  name: '--color', 
  syntax: '<color>', 
  initialValue: 'transparent',
  inherits: true,
})

svg {
  --color: red;
  transition: --color 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>

БЛОГ НА HUSL

Не работает transition смены цвета при :hover в google chrome

Ответы (2 шт):