сторона

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

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

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

<textPath>

Пример

html

<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: Это значение размещает текст справа от пути (относительно направления пути). Это эффективно переворачивает направление пути.

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

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

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

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

© 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/Attribute/side