SVG含tspan标签的文本为何渲染位置异常？维基共享资源实例

你的情况属于SVG文本渲染的跨引擎兼容性问题，代码有可优化空间，同时维基共享的渲染器也存在特定处理差异，具体如下：

1. 代码的潜在歧义 #

你当前的代码里，<tspan>仅设置了baseline-shift和font-size，未明确指定位置属性。虽然<text>设置了text-anchor: middle，但不同渲染引擎计算文本块“中间点”时，对带样式变化的tspan宽度测量逻辑不一致：

• 本地工具（Inkscape、Ubuntu查看器）会将(s∘r)²作为整体计算宽度后居中；
• 维基共享的渲染器可能单独计算主文本(s∘r)的宽度居中，再将tspan的“2”直接追加，导致整体右移。

另外，baseline-shift: super属于CSS属性，SVG对其支持本身存在差异（比如Firefox就不支持该值），建议用dy="-0.6em"这种更兼容的方式实现上标。

2. 兼容优化后的代码 #

给tspan添加明确的位置控制，替换baseline-shift为兼容性更好的dy属性，确保各渲染器表现一致：

<g style="text-anchor: middle; letter-spacing: -1;" font-size="25px" font-family="sans-serif">
    <text x="500">
        (s∘r)
        <tspan dy="-0.6em" font-size="18px" x="500">2</tspan>
    </text>
</g>

这里给tspan指定了与父<text>相同的x值，强制上标“2”对齐文本中间基准线，同时用dy控制上移距离，兼容性更强。

3. 维基共享渲染器的问题 #

从测试文件来看，纯文本居中正常，加tspan就偏移，说明维基共享使用的SVG渲染后端（大概率是特定版本的librsvg）在处理嵌套tspan的文本锚点计算时存在bug。即便代码符合SVG规范，也可能出现渲染差异，你在维基社区提问的做法是正确的。

总结：你的代码可通过优化规避兼容性问题，同时维基共享的渲染器确实存在特定处理异常。

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