path

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

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

• <animateMotion>
• <textPath>

Пример

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

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

textPath

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

<path-data>

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

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