3

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

2 ответа 2

4

Получилось менять цвет у <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>

3
  • а я не допетрил что то ...офигеть 20 апр 2020 в 10:24
  • Хм.. А почему в svg переменные анимируются? В html же нет, если registerProperty не вызвать.
    – Qwertiy
    20 апр 2020 в 10:42
  • @Qwertiy в хроме много странностей, сайд-эффекты реализации) 20 апр 2020 в 11:12
3

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>

8

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.