Mobile Safari中SVG text元素textLength属性不生效如何解决

SVG文本在不同浏览器中的渲染效果存在差异，实测移动版Safari不会遵循SVG <text> 元素上设置的textLength属性，出问题的代码片段如下：

<text dy="10" textLength="240" fill="red">

不同浏览器渲染效果对比如下：

可复现问题的完整SVG代码如下：

<svg class="passportStamp stampEffectClass" width="120" height="120" viewBox="0 0 206 206">
  <circle cx="103" cy="103" r="100" fill="none" stroke="red" stroke-width="3"></circle>
  <circle cx="103" cy="103" r="90" fill="none" stroke="red" stroke-width="3"></circle>

  <text x="103" y="70" text-anchor="middle" fill="red" stroke-width="2px" alignment-baseline="middle" font-variant="all-small-caps" font-size="31" font-weight="bold">textLength</text>
  <text x="103" y="100" text-anchor="middle" fill="red" alignment-baseline="middle" font-variant="all-small-caps" font-size="45">100</text>
  
  <path id="textCircle" d="M28,103a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" fill="none" stroke="none"></path>
  <text dy="10" textLength="240" fill="red">
    <textPath xlink:href="#textCircle">textLength Chrome vs iOS</textPath>
  </text>
  
  <g fill="red" transform="scale(0.15) translate(550 800)">
    <path d="m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47"></path>
  </g>
  
  <g fill="red" transform="translate(90,30)">
    <path d="M14.128 1.79003C13.1305"></path>
  </g>
</svg>

• JS动态校准字间距
  移动版Safari虽然不识别<textPath>场景下的textLength属性，但支持通过getComputedTextLength()方法获取文本实际渲染长度，也支持letter-spacing属性调整字间距。可以在SVG加载完成后做兼容处理：遍历所有设置了textLength的文本元素，先读取文本当前渲染长度，和textLength设定的目标值做差，将差值平摊到每个字符的字间距上，即可让文本长度匹配设定值。
  核心实现代码：

  // 遍历所有设置了textLength的text元素做兼容校准
  document.querySelectorAll('text[textLength]').forEach(textEl => {
    const targetLength = Number(textEl.getAttribute('textLength'))
    const currentLength = textEl.getComputedTextLength()
    // 长度差在1px以内不需要调整
    if (Math.abs(targetLength - currentLength) < 1) return
    const charCount = textEl.textContent.length
    // 计算每个字符间需要补充的间距值
    const perCharGap = (targetLength - currentLength) / (charCount - 1)
    textEl.style.letterSpacing = `${perCharGap}px`
  })
  

  这个方案的优势是保留文本的可编辑、可选中特性，不需要修改原有SVG结构，适配成本低。

• 文本转矢量路径
  如果SVG内容是固定的（比如示例中的印章效果），不需要支持文本编辑、复制，可以直接在设计工具（Figma、Illustrator、SVG优化工具等）中将沿路径排列的文本直接转成矢量路径，从根源上消除不同浏览器文本渲染规则的差异，所有端渲染效果完全一致，无兼容问题。

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