Рендеринг 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

В соответствии со спецификацией SVG

Если направление inline-base является горизонтальным, то любые атрибуты 'x' в элементах 'text' или 'tspan' представляют новые абсолютные смещениявдоль пути, таким образом обеспечивая явные новые значения для начальной точки на пути.

Кажется, только Firefox делает это правильно.

Answer 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>