Safari中带线性渐变的SVG textPath显示异常如何修复？

问题现象 #

在Safari浏览器中，为沿路径排列的textPath应用线性渐变时，文本会出现显示断裂、渐变错位的损坏效果。

问题根源 #

1. 渐变引用语法错误：原代码中fill="url("#SvgjsLinearGradient1001")"使用了HTML转义的引号"，Safari无法正确解析这种格式的渐变ID引用。
2. 渐变坐标系适配问题：环形路径下，默认的gradientUnits="objectBoundingBox"可能导致渐变映射与文本路径不匹配，引发渲染异常。

修复方案 #

步骤1：修正渐变引用语法 #

将转义引号替换为普通引号，确保Safari能正确识别渐变ID：

<!-- 错误写法 -->
fill="url(&quot;#SvgjsLinearGradient1001&quot;)"

<!-- 正确写法 -->
fill="url(#SvgjsLinearGradient1001)"

步骤2：调整渐变坐标系（针对环形路径） #

为linearGradient添加gradientUnits="userSpaceOnUse"，并指定渐变的起始/结束坐标匹配文本路径的范围，确保渐变沿路径正确分布：

<linearGradient x1="300" y1="400" x2="500" y2="400" id="SvgjsLinearGradient1001" gradientUnits="userSpaceOnUse">
  <stop offset="0" style="stop-color:#007cf0"></stop>
  <stop offset="1" style="stop-color:#ff0080"></stop>
</linearGradient>

步骤3：优化文本层级（可选） #

将描边和填充的textPath合并到同一个text元素中，减少DOM层级，避免渲染冲突：

<text stroke-width="10" stroke="#ffffff" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">
  <textPath xlink:href="#SvgjsPath1000" fill="url(#SvgjsLinearGradient1001)" alignment-baseline="middle">
    RRRRRRRRRRRRRRRRRRRRR
  </textPath>
</text>

修复后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="1000">
  <defs>
    <linearGradient x1="300" y1="400" x2="500" y2="400" id="SvgjsLinearGradient1001" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#007cf0"></stop>
      <stop offset="1" style="stop-color:#ff0080"></stop>
    </linearGradient>
  </defs>
  <g font-size="42.5" font-weight="800">
    <path d="M 400, 400
          m -100, 0
          a 100, 100 0 1,0 200, 0
          a 100, 100 0 1,0 -200, 0" fill="transparent" stroke="black" id="SvgjsPath1000"></path>
    <circle r="4" cx="400" cy="400" fill="#000000"></circle>
    <text stroke-width="10" stroke="#ffffff" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">
      <textPath xlink:href="#SvgjsPath1000" fill="url(#SvgjsLinearGradient1001)" alignment-baseline="middle">
        RRRRRRRRRRRRRRRRRRRRR
      </textPath>
    </text>
  </g>
</svg>

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