为何linearGradient的ID带冒号时，SVG在<img>标签中渐变失效？

问题原因 #

这个行为差异本质是Chrome在两种场景下对SVG内部url()引用的ID解析规则不同导致的：

• 直接打开SVG文件时，浏览器将其作为独立XML文档解析，XML规范允许ID包含冒号字符，url('#myGradient:1234')可以直接匹配到对应ID的渐变元素，因此渐变正常显示。
• 通过<img>标签在HTML页面中引入SVG时，Chrome会按照URI规则解析url()中的片段标识符（#后的内容）：冒号在URI规范中属于特殊字符，会被识别为命名空间/协议分隔符，解析器会自动截断冒号后的内容，实际查询的ID变成了myGradient，自然无法匹配到myGradient:1234的渐变元素，因此填充失效。

把ID改为不带冒号的myGradient后，没有特殊字符干扰，两种场景下的ID查询都能正常命中，因此渐变都可以正常显示。如果需要保留带冒号的ID，也可以将冒号转义为URI编码%3A，把引用写法改成fill="url('#myGradient%3A1234')"即可兼容<img>引入的场景。

内容的提问来源于stack exchange，提问作者Tyler V.