path

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>

animateMotion

Für <animateMotion> definiert path den Bewegungsweg, der im gleichen Format ausgedrückt und auf die gleiche Weise interpretiert wird wie die geometrische Eigenschaft d für das <path>-Element. Die Wirkung einer Bewegungsweg-Animation ist eine Verschiebung entlang der x- und y-Achsen des aktuellen Benutzerkoordinatensystems durch die x- und y-Werte, die im Laufe der Zeit berechnet werden.

<path-data>

Dieser Wert definiert den Bewegungsweg, entlang welchem das referenzierte Element animiert wird. Für detaillierte Informationen zu den verwendbaren Befehlen siehe die Erklärung zum d-Attribut.

textPath

Für <textPath> definiert path den Pfad, auf dem die Glyphen eines <text>-Elements gerendert werden. Ein leerer String gibt an, dass es keine Pfaddaten für das Element gibt. Das bedeutet, dass der Text innerhalb des <textPath>-Elements weder gerendert noch zur Begrenzungsbox des <text>-Elements beiträgt. Wird das Attribut nicht angegeben, wird stattdessen der im href angegebene Pfad verwendet.

<path-data>

Dieser Wert definiert den Textpfad, entlang welchen die Glyphen des <text>-Elements ausgerichtet sind. Für detaillierte Informationen zu den verwendbaren Befehlen siehe die Erklärung zum d-Attribut.

Spezifikationen