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

Question

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

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

: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必须有非零值的单位。

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