为何SVG中使用CSS var省略闭合括号仍可正常生效？

我在SVG的fill属性中使用CSS变量时故意省略了var()的闭合括号，颜色却依然正常显示；但在样式表中这么做的话，样式就会失效，这是为什么？

代码示例 #

<body>
<style>
    :root {
        --main-color: #06c;
    }
    /* 若省略var()的闭合括号，样式会失效，这符合预期*/
    h1 {
      color: var(--main-color);
    }
</style>

<h1>Here is my coloured heading</h1>

<!-- 省略了var()的闭合括号，但颜色仍正常生效，虽容错但不知原因 -->
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="var(--main-color" />
  Sorry, your browser does not support inline SVG.  
</svg>
</body>

原因解析 #

核心在于SVG属性和CSS样式的解析规则存在差异：

• CSS样式表场景：var()是严格的CSS语法，必须遵循完整的var(--变量名)格式。一旦缺少闭合括号，整个声明会被判定为无效，浏览器直接忽略该样式，这是符合CSS规范的行为。
• SVG属性场景：浏览器对SVG属性值的解析做了容错处理。当它识别到属性值以var(--开头时，会自动把属性值的剩余部分当作变量名，哪怕没有闭合括号，相当于浏览器帮你补全了缺失的)，所以变量能正常取值生效。

不过这种写法属于不规范的语法，虽然当前浏览器有容错，但不建议这么用——后续浏览器的解析规则如果调整，这种写法很可能会失效。

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