SVG 文本路径渲染在 Firefox 中出现反转答案

【问题标题】：SVG textpath rendering appears reversed in FirefoxSVG 文本路径渲染在 Firefox 中出现反转
【发布时间】：2019-10-16 09:05:24
【问题描述】：

我正在尝试沿 SVG 中的弯曲路径呈现文本。它在 Chrome、Safari 和 Edge 中按预期呈现，但在 Firefox 中呈现不同。

jsfiddle：http://jsfiddle.net/hLyq1ug6/

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: blue"><path d="m57.8,160 a102.2,102.2 0 1 1 204.4,0" fill="red" id="curvedTextPath5cf008a181659"></path><text x="160" y="185.5" style="fill: #ffffff; font-size: 35pt"><textPath xlink:href="#curvedTextPath5cf008a181659" startOffset="0" text-anchor="middle">Hello</textPath></text></svg>

预期：

火狐：

【问题讨论】：

标签： firefox svg

【解决方案1】：

根据SVG specification

当 inline-base 方向为水平时，'text' 或 'tspan' 元素上的任何 'x' 属性表示沿路径的新绝对偏移量，从而为路径上的起点提供明确的新值。

似乎只有 Firefox 能正确做到这一点。

【讨论】：

【解决方案2】：

我已经从文本中删除了 x 和 y 属性。如果您需要偏移文本使用startOffset="50%"我希望它有所帮助。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: blue">
<path d="m57.8,160 a102.2,102.2 0 1 1 204.4,0" fill="red" id="curvedTextPath5cf008a181659"></path>
<text style="fill: #ffffff; font-size: 35pt">
<textPath xlink:href="#curvedTextPath5cf008a181659" startOffset="50%" text-anchor="middle">Hello</textPath>
</text>
</svg>

【讨论】：