Как задать радиус или положение SVG через CSS-переменную

Question

_{Перевод вопроса @Gangula на EN SO:}

Можно ли с помощью CSS-переменных управлять в SVG такими значениями, как радиус или положение, через атрибуты элемента?

Вот, например, я задал переменные для цвета --dark-text-clr и радиуса --radius. Когда делаю заливку цветом — CSS-переменная работает (1ый круг), а когда использую переменную для радиуса — элемент не отображается (2ой круг).

:root {
  --dark-text-clr: blue;
  --radius: 12;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
    <circle cx="9" cy="9" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=9 ></circle>
    <circle cx="36" cy="20" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r="var(--radius)" ></circle>
</svg>

Answer 1

_{Перевод ответа @Corrl на EN SO:}

Есть три способа задать значение для радиуса:

через соответствующий атрибут

<circle ... r=10>

через классы и стили

circle {
  r: 10px;
}

через атрибут style

<circle... style="r: 10px;" ></circle>

У последнего способа наивысший прироритет. Взгляните на этот пример. У всех трёх кругов есть r атрибут, но во 2ом круге его перебили свойства класса, а в 3ем круге всех одолел атрибут style.

(Нет нужды использовать все три способа вместе. Делаю это только, чтобы показать, как они переопределяют уже заданное значение.)

:root {
  --dark-text-clr: purple;
  --radius: 20px;
}

.circle {
  r: 10px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 300 300">
    <circle cx="10" cy="10" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5></circle>
    <circle cx="30" cy="30" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle"></circle>
    <circle cx="60" cy="60" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle" style="r: var(--radius);" ></circle>
</svg>

Похоже, атрибут r с CSS-переменной работает в Firefox, но не в Chrome/Edge:

<circle ... r="var(--radius);" ></circle>

Так что лучше воспользуйтесь атрибутом style:

<circle ... style="r: var(--radius);" ></circle>

Answer 2

_{Перевод ответа @Robert Longson на EN SO и комментариев к нему:}

Да, но в CSS нужно указывать единицы для ненулевых значений.

Код ниже работает в Firefox и не работает в Edge или Chrome (баг-репорт).

:root{
  --dark-text-clr: blue;
  --radius: 12px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
    <circle cx="9" cy="9" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=9 ></circle>
    <circle cx="36" cy="20" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r="var(--radius)" ></circle>
</svg>

БЛОГ НА HUSL

Как задать радиус или положение SVG через CSS-переменную

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