path

animateMotion

Bei <animateMotion> definiert path den Bewegungspfad. Er wird im selben Format angegeben und auf dieselbe Weise interpretiert wie die geometrische Eigenschaft d des Elements <path>. Eine Animation entlang eines Bewegungspfads bewirkt eine Verschiebung entlang der x- und y-Achse des aktuellen Benutzerkoordinatensystems um die im Zeitverlauf berechneten x- und y-Werte.

<path-data>

Dieser Wert definiert den Bewegungspfad, entlang dessen das referenzierte Element animiert wird. Ausführliche Informationen zu den verwendbaren Befehlen finden Sie in der Erläuterung zum Attribut d.

textPath

Bei <textPath> definiert path den Pfad, auf dem die Glyphen eines <text>-Elements gerendert werden. Eine leere Zeichenfolge zeigt an, dass für das Element keine Pfaddaten vorhanden sind. Das bedeutet, dass der Text innerhalb des <textPath>-Elements weder gerendert wird noch zum Begrenzungsrahmen des <text>-Elements beiträgt. Wenn das Attribut nicht angegeben ist, wird stattdessen der in href angegebene Pfad verwendet.

<path-data>

Dieser Wert definiert den Textpfad, entlang dessen die Glyphen des <text>-Elements ausgerichtet werden. Ausführliche Informationen zu den verwendbaren Befehlen finden Sie in der Erläuterung zum Attribut d.

Beispiel

html,
body,
svg {
  height: 100%;
}

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

Spezifikationen