具有 CSS 个变量的 SVG 半径或位置

Question

是否可以在 SVG 中使用 CSS 变量来操纵元素的“属性样式”中的半径或位置等值？

例如，在下面的代码中，我添加了一个 CSS 颜色变量 - --dark-text-clr 和一个半径变量 --radius。当我使用时，它渲染得很好 - 第一个圆，但使用 radius 变量不会渲染元素 - 第二个圆。

: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

是的，但是 CSS must have units 用于非零值。

: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>

Answer 2

根据 MDN Docs“从 SVG2 开始，r 是一个几何体属性，这意味着该属性也可以用作圆的 CSS 属性。”

半径值有3种设置方式

作为属性

<circle ... r=10>

通过 class 和样式表

circle {
  r: 10px;
}

内联 'style' 属性

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

最后一种方式出现的次数最多。看一下这个示例，其中所有圆圈元素都将 r 设置为属性，它被样式表（第二个圆圈）覆盖，它再次被内联样式属性（第三个圆圈）覆盖
（这三种方式不必同时使用，只是组合起来说明哪一种出现率更高，覆盖掉已经设置的值）

: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 似乎在 firefox 中有效，但 在 chrome/edge

中无效

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

所以最好在样式属性上设置

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

具有 CSS 个变量的 SVG 半径或位置

SVG radius or position with CSS variables

css

svg

css-variables