使用RTL语言时Safari渲染SVG text tspan位置错误问题排查

这是Safari WebKit渲染引擎的已知兼容性bug，不是代码本身的问题——Chrome和Firefox的Blink、Gecko引擎对SVG RTL文本中tspan的dy属性处理符合规范，但Safari在RTL布局逻辑下会忽略tspan的垂直偏移属性，甚至导致排列错乱。

下面是几个实测有效的修复方案：

• 用transform替代dy属性
  把tspan的dy换成transform="translate(0, 偏移值)"，比如原来的<tspan dy="1.2em">...</tspan>改成<tspan transform="translate(0, 1.2em)">...</tspan>。Safari能正确识别transform的垂直偏移，不会受RTL布局干扰。

• 拆分tspan为独立text元素
  如果是多行文本，别用tspan拆分，每个段落用单独的<text>元素，通过y属性控制垂直位置。示例代码：

  <text x="50" y="20" direction="rtl" text-anchor="end">第一行文本</text>
  <text x="50" y="40" direction="rtl" text-anchor="end">第二行文本</text>
  

  这种方式完全避开了tspan在Safari RTL下的bug，每个文本块的位置都能被正确解析。

• 开启SVG的BIDI兼容模式（备选）
  在SVG根元素添加xml:space="preserve"，同时给文本元素设置white-space="pre"，部分场景下能让Safari更规范地处理RTL文本的排版属性：

  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
    <text direction="rtl" text-anchor="end" white-space="pre">
      <tspan x="50" y="20">第一行</tspan>
      <tspan x="50" dy="1.2em">第二行</tspan>
    </text>
  </svg>
  

  不过这个方法的兼容性不如前两种，建议优先测试验证。

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