Не работает transition в Chrome при :hover на многоцветных иконках, стили которых заданы CSS переменными

Question

Есть svg иконка которая вставляется с помощью <use>. Необходимо добиться плавности перехода от одних цветов к другим при :hover. Иконка состоит из нескольких элементов и каждый должен менять цвет на какой-то свой определенный поэтому здесь не подойдет конструкция в css вида

svg { fill: #ddd; transition: .25s; }
svg:hover { fill: #ddd; }

Минимальный пример реализован ниже. p.s. если проверять с FF то все работает, но в chrome и opera беда

:root {
  --color: #33d;
  --color-bg: #99b;
}

svg {
  width: 30px;
  height: 30px;
}

circle, path {
  transition: 0.25s;
}

svg:hover {
  --color: #d33;
  --color-bg: #d99;
}

<div style="display: none;">
  <svg id="play" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="11" cy="11" r="11" fill="var(--color)"/>
    <circle cx="11.0001" cy="11.0001" r="9.9" fill="var(--color-bg)"/>
    <path d="M8.7998 13.4619V8.4001C8.7998 7.61556 9.66199 7.13657 10.3281 7.55104L14.1245 9.91323C14.7308 10.2905 14.7577 11.1634 14.1757 11.5772L10.3793 14.2769C9.71725 14.7477 8.7998 14.2743 8.7998 13.4619Z" fill="var(--color)"/>
  </svg>
</div>

<svg>
  <use xlink:href="#play"></use>
</svg>

Answer 1

Похоже, что это действительно проблема Chrome, когда он обрабатывает переменные в <use> Пробовал различные варианты и комбинации, но transition с переменными не работает

Убрал <use>, окружности и path обернул в групповой тег <g id="play"> и в chrome заработало.

:root {
  --color: #33d;
  --color-bg: #99b;
}

svg {
  width: 30px;
  height: 30px;
}

circle, path {
  transition: 0.5s;
}

#play:hover {
  --color: #d33;
  --color-bg: #d99;
}

<div >
  <svg  viewBox="0 0 22 22"  xmlns="http://www.w3.org/2000/svg">
    <g id="play">
	<circle cx="11" cy="11" r="11" fill="var(--color)"/>
    <circle cx="11.0001" cy="11.0001" r="9.9" fill="var(--color-bg)"/>
    <path d="M8.7998 13.4619V8.4001C8.7998 7.61556 9.66199 7.13657 10.3281 7.55104L14.1245 9.91323C14.7308 10.2905 14.7577 11.1634 14.1757 11.5772L10.3793 14.2769C9.71725 14.7477 8.7998 14.2743 8.7998 13.4619Z" fill="var(--color)"/>
	</g>
  </svg>
</div>

Ниже пример с трехцветной иконкой

 :root {
  --tr:1s;
  }
 #cup {
  --color-1: #c13127;
  --color-2: #ef5b49;
  --color-3: #cacaea;
 
 }

  #cup:hover {
 --color-1: gold;
  --color-2: skyblue;
  --color-3: yellowgreen;
   
 }
 rect, path {
 transition: var(--tr);
{

 <svg  xmlns="http://www.w3.org/2000/svg" width="100" height="100"  viewBox="0 0 20 20" >
       
	 <g id="cup">   
    <path   fill="var(--color-1)"   d="M15,17H14V9h3a3,3,0,0,1,3,3h0A5,5,0,0,1,15,17Zm1-6v3.83A3,3,0,0,0,18,12a1,1,0,0,0-1-1Z"/>
    <rect  fill="var(--color-2)" x="1" y="7" width="15" height="12" rx="3" ry="3"/>
    <path  fill="var(--color-3)"  d="M7.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,0,1-1.79.89Z"/>
    <path  fill="var(--color-3)" d="M3.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"/>
    <path  fill="var(--color-3)" d="M11.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"/>
   </g>
   
  
</svg>

БЛОГ НА HUSL

Не работает transition в Chrome при :hover на многоцветных иконках, стили которых заданы CSS переменными

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