能否使用CSS变量控制SVG元素属性中的半径、位置等数值？

核心原理 #

CSS变量完全可以用来控制SVG的半径、位置类属性，你遇到的失效问题是使用方式错误导致的：

• fill属于可被CSS解析的SVG表现属性，直接写在标签属性上时浏览器会自动按CSS规则解析，所以var(--dark-text-clr)可以正常生效。
• r、cx、cy、x、y这类SVG几何属性，直接写在标签属性上时，浏览器不会把属性值传入CSS解析流程，写在里面的var(--radius)只会被识别为无效字符串，因此元素无法正常渲染。

解决方法 #

现代浏览器（Chrome 95+、Firefox 93+、Safari 15.4+）已支持在CSS中直接定义SVG几何属性，你只需要把变量的赋值逻辑放到CSS规则（外部样式、style标签、行内style都可）中即可生效，同时建议给数值类CSS变量补充单位，避免解析差异。

修正后的完整代码示例：

:root{
  --dark-text-clr: blue;
  --radius: 12px; /* 补充px单位更稳妥 */
}

<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)" r="9" ></circle>
  <!-- 通过行内style绑定r属性的变量 -->
  <circle cx="36" cy="20" fill="var(--dark-text-clr)" style="r: var(--radius)" ></circle>
</svg>

低版本浏览器兼容方案 #

如果需要适配不支持CSS定义SVG几何属性的旧浏览器，可以通过JS读取CSS变量的值，再动态赋值给元素的对应属性即可。

内容的提问来源于stack exchange，提问作者Gangula