<textPath>

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

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

Атрибуты

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

Смещение начала текста относительно начала пути. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию: 0; Анимируемый: да

textLength

Ширина области, в которой будет отображаться текст. Тип значения: <length> | <percentage> | <number>; Значение по умолчанию: auto; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGTextPathElement.

Пример

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

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

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