path

Атрибут path имеет два разных значения: либо он определяет текстовый путь, по которому отображаются символы текста, либо путь движения, по которому анимируется связанный элемент.

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

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="MyPath"
    fill="none"
    stroke="silver"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath
      path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

animateMotion

Для <animateMotion>, path определяет путь движения, выраженный в том же формате и интерпретируемый так же, как геометрическое свойство d для элемента <path>. Эффект анимации пути движения — это перемещение по осям x и y текущей системы координат пользователя на значения x и y, вычисленные в течение времени.

Значение	`<path-data>`
Значение по умолчанию	Ничего
Анимируемо	Нет

<path-data>: Это значение определяет путь движения, по которому анимируется связанный элемент. Для получения подробной информации о командах, которые могут быть использованы, см. объяснение атрибута d.

textPath

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

Значение	`<path-data>`
Значение по умолчанию	Указанный в `href` путь
Анимируемо	Да

<path-data>: Это значение определяет текстовый путь, по которому выравниваются глифы элемента <text>. Для получения подробной информации о командах, которые могут быть использованы, см. объяснение атрибута d.

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

Спецификация
Scalable Vector Graphics (SVG) 2 # TextPathElementPathAttribute
SVG Анимации Уровень 2 # AnimateMotionElementPathAttribute

© 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/path