side

Ограниченная доступность

Эта функция не входит в Baseline, поскольку она не работает в некоторых наиболее широко используемых браузерах.

Экспериментальная функция: Это экспериментальная технология
Перед использованием в рабочей среде внимательно ознакомьтесь с таблицей совместимости браузеров.

Атрибут side определяет, с какой стороны пути располагается текст (относительно направления пути).

Этот атрибут можно использовать со следующими SVG-элементами:

<textPath>

Пример

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle
    id="circle1"
    cx="100"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
  <circle
    id="circle2"
    cx="320"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
</svg>

Примечания по использованию

Значение	`left` \| `right`
Значение по умолчанию	`left`
Анимируемый	Да

left: Это значение размещает текст с левой стороны пути (относительно направления пути).
right: Это значение размещает текст с правой стороны пути (относительно направления пути). Фактически это меняет направление пути на противоположное.

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # TextPathElementSideAttribute>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`side`	Нет	Нет	61	Нет	Нет	Нет	61	Нет	Нет	Нет	Нет	Нет

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