SVG文本路径渲染在Firefox中看起来相反

Question

我正在尝试沿着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：

Answer 1

我从文本中删除了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>

Answer 2

根据SVG specification

  

当行内基方向为水平时，则'text'或'tspan'元素上的任何'x'属性都代表沿路径的新绝对偏移，从而为路径起点提供了明确的新值。 / p>

似乎只有Firefox可以正确执行此操作。