<textPath>

Для рендеринга текста вдоль формы <path>, заключите текст в элемент <textPath>, у которого есть атрибут href со ссылкой на элемент <path>.

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

Атрибуты

href: URL пути или базовой формы, на которой необходимо отобразить текст. Если задан атрибут path, атрибут href не оказывает никакого влияния. Тип значения: <URL> ; Значение по умолчанию: нет; Анимируемо: да
lengthAdjust: Место применения корректировки длины к тексту: пространство между глифами или и пространство, и сами глифы. Тип значения: spacing|spacingAndGlyphs; Значение по умолчанию: spacing; Анимируемо: да
method: Метод рендеринга отдельных глифов по пути. Тип значения: align|stretch ; Значение по умолчанию: align; Анимируемо: да
path Экспериментальный: Путь, по которому должен быть отрисован текст. Тип значения: <path_data> ; Значение по умолчанию: нет; Анимируемо: да
side Экспериментальный: Сторона пути, на которой должен быть отрисован текст. Тип значения: left|right ; Значение по умолчанию: left; Анимируемо: да
spacing: Способ обработки пробелов между глифами. Тип значения: auto|exact ; Значение по умолчанию: exact; Анимируемо: да
startOffset: Сдвиг начала текста от начала пути. Тип значения: <длина>|<процент>|<число> ; Значение по умолчанию: 0; Анимируемо: да
textLength: Ширина пространства, в которое будет отображён текст. Тип значения: <длина>|<процент>|<число> ; Значение по умолчанию: авто; Анимируемо: да

Контекст использования

Категории	Элемент текстового содержимого, дочерний элемент текстового содержимого
Разрешенное содержимое	Данные символов и любое количество следующих элементов в любом порядке: Дескриптивные элементы `<a>`, `<animate>`, `<set>`, `<tref>`, `<tspan>`

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # TextPathElement

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`textPath`	1	12	2	15	3.1 До Safari 6, textPath не перерисовывался при динамическом изменении пути (см. баг 15799)	18	4	14	2 До Safari 6, textPath не перерисовывался при динамическом изменении пути (см. баг 15799)	1.0	4.4
`fill`	1	79	2	15	3.1	18	4	14	2	1.0	4.4
`href`	50 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	12	2	37 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	12.1 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	50 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	4	37 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	12.2 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	5.0 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.	50 Принимает только ссылки на элементы path. Базовые формы (прямоугольник, круг, эллипс, линия, многоугольник, ломаная) не будут работать.
`path`	Нет	Нет	61	Нет	Нет	Нет	61	Нет	Нет	Нет	Нет
`side`	Нет	Нет	61	Нет	Нет	Нет	61	Нет	Нет	Нет	Нет
`spacing`	1	79	20	15	3.1	18	20	14	2	1.0	4.4
`startOffset`	1	12	20	15	3.1	18	20	14	2	1.0	4.4
`systemLanguage`	1	12	12	15	3.1	18	14	14	2	1.0	4.4
`textLength`	1	12	2	15	3.1	18	4	14	2	1.0	4.4
`xlink_href`	1	12	2	15	3.1	18	4	14	2	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath