Рендеринг текстового пути SVG отображается в обратном порядке в Firefox

Я пытаюсь отобразить текст по изогнутому пути в 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>

Ожидается:
Рендеринг текстового пути SVG отображается в обратном порядке в Firefox

Фаерфокс:
Рендеринг текстового пути SVG отображается в обратном порядке в Firefox

firefox svg

30.05.2019 19:19

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

30.05.2019 19:38

Согласно Спецификация SVG

When the inline-base direction is horizontal, then any ‘x’ attributes on ‘text’ or ‘tspan’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path.

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

30.05.2019 22:29

Другие вопросы по теме

Как получить промежуточное значение атрибута элемента d3 во время перехода?

Пауза/воспроизведение SVG Не могу понять, почему это не работает...?

Как сделать svg преобразование в процентах

Рендеринг полигонов с помощью pixijs

Масштабирование SVG, которое не является встроенным

Самый простой способ сделать сложный div с волнами

Почему синий круг не вращается в центре самого себя

Как получить значения из файла SVG с помощью QT

Как исправить проблему маскирования пути SVG, когда слишком много частей пути обрезается при применении маски

Как я могу переключить значение текстового элемента svg с помощью D3.js, когда пользователь щелкает текст?

Рендеринг текстового пути SVG отображается в обратном порядке в Firefox

Ответы 2

Другие вопросы по теме

Похожие вопросы