SVG路径引用linearGradient时首个路径不可见问题求助

问题原因 #

SVG与HTML的ID命名规则明确要求ID不能以数字开头，你给渐变设置的0-link-3是以数字0开头的，浏览器无法正确解析这个ID对应的渐变资源，所以第一个路径引用url(#0-link-3)时找不到渐变，自然就显示不出来；而纯色是直接指定颜色，不受ID规则影响，所以能正常显示。第二个路径的渐变ID应该符合命名规则（未以数字开头），因此两种情况都能正常渲染。

解决办法 #

把渐变的ID改成合法格式——不要以数字开头，比如将#0-link-3改成#link-3或者#gradient-0-link-3这类形式，同时同步修改路径stroke属性里引用的ID。

举个修正后的示例代码：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 修正后的渐变ID，不以数字开头 -->
  <defs>
    <linearGradient id="link-3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <linearGradient id="valid-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00ff00"/>
      <stop offset="100%" stop-color="#ffff00"/>
    </linearGradient>
  </defs>
  <!-- 引用修正后的渐变ID -->
  <path d="M50,50 L350,50" stroke="url(#link-3)" stroke-width="5" fill="none"/>
  <path d="M50,150 L350,150" stroke="url(#valid-gradient)" stroke-width="5" fill="none"/>
</svg>

修改后在Edge Chromium、Chrome、Firefox中测试，第一个路径就能正常显示渐变描边了，因为浏览器可以正确识别合法ID对应的渐变资源。

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