跨浏览器下tspan结合dy属性旋转表现不一致的问题解决

你的问题核心是Chrome系浏览器（如Brave）与Firefox对textPath内tspan的dy、rotate属性解析逻辑存在差异，导致渲染效果不一致。可以通过以下修改实现跨浏览器统一的显示效果：

修改方案 #

1. 用transform替代tspan的rotate属性：
   不同浏览器对textPath上下文内tspan的rotate属性处理规则不统一，改用SVG标准的transform属性控制旋转，行为更符合规范且跨浏览器一致。
2. 明确设置对齐基准属性：
   添加alignment-baseline和dominant-baseline属性，统一垂直对齐规则，避免依赖浏览器默认值。
3. 调整垂直偏移方式：
   避免在textPath内的tspan使用dy，改用transform的translate控制偏移，确保偏移量计算逻辑在各浏览器中统一。

修改后的代码 #

<svg id="svg1" style="overflow:visible;height:min-content">
  <path id="path1" stroke="black" d="M 0 50 L 100 50" stroke-width="10" />
  <text text-anchor="middle" alignment-baseline="middle">
    <textPath href="#path1" startOffset="50%" fill="red" dominant-baseline="middle">
      <tspan font-size="100" transform="rotate(180 0 0) translate(0, 26)">O</tspan>
    </textPath>
  </text>
</svg>

关键修改说明 #

• transform="rotate(180 0 0)"：明确以tspan原点为旋转中心执行180度旋转，该行为在所有支持SVG的浏览器中解析逻辑一致。
• alignment-baseline="middle"和dominant-baseline="middle"：强制文本垂直居中对齐到路径，消除不同浏览器默认对齐方式的差异。
• 若需调整垂直位置，直接在transform中添加translate(0, 26)替代原有的dy，确保偏移量的计算规则统一。

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