Daspath-Attribut hat zwei unterschiedliche Bedeutungen: Es kann entweder einen Textpfad definieren, entlang dessen die Zeichen eines Textes gerendert werden, oder einen Bewegungspfad, entlang dessen ein referenziertes Element animiert wird.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

• <animateMotion>
• <textPath>

Beispiel

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <path       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> definiertpath den Bewegungspfad, ausgedrückt im gleichen Format und interpretiert auf die gleiche Weise wie die geometrische Eigenschaftd für das<path>-Element. Der Effekt einer Bewegungspfad-Animation ist eine Translation entlang der x- und y-Achsen des aktuellen Benutzerskoordinatensystems durch die im Laufe der Zeit berechneten x- und y-Werte.

<path-data>

Dieser Wert definiert den Bewegungspfad, entlang dessen das referenzierte Element animiert wird. Für detaillierte Informationen über die verwendbaren Befehle lesen Sie dieErklärung zumd-Attribut.

textPath

Für<textPath> definiertpath den Pfad, auf den dieGlyphen eines<text>-Elements gerendert werden. Ein leerer String zeigt an, dass keine Pfaddaten für das Element vorhanden sind. Das bedeutet, dass der Text innerhalb des<textPath>-Elements nicht gerendert wird oder zur Begrenzungsbox des<text>-Elements beiträgt. Wenn das Attribut nicht angegeben ist, wird stattdessen der Pfad aushref verwendet.

<path-data>

Dieser Wert definiert den Textpfad, entlang dessen die Glyphen des<text>-Elements ausgerichtet werden. Für detaillierte Informationen über die verwendbaren Befehle lesen Sie dieErklärung zumd-Attribut.

Spezifikationen