SVG/Attribut/pathLength

Das pathLength-Attribut gibt die Länge des Textpfades an. Es wird für weitere Berechnungen für Text entlang von Pfaden, animateMotion und stroke-Animationen benötigt.

Erlaubte Werte

Längenangabe

Standardwert

keiner

anwendbar auf

path, cirlce, ellipse,line, polygon, polyline, and rect

Präsentationsattribut

nein

mit CSS animierbar

ja

Beispiel

<path ... pathLength="1" stroke-dashoffset="-1" />

Im Beispiel wurde die pathLength auf einen Wert von 1 gesetzt. So kann die Randlinie mit stroke-dashoffset ohne weitere Berechnungen verschoben werden.

Beachten Sie: Ältere Browser konnten die Pfadlänge nur für das SVGPathElement auslesen, mittlerweile gilt dies auch für die Pfadlänge von Grundformen (SVGGeometryElement-Objects).

Empfehlung: Sie können die Pfadlänge mit der JavaScript-Methode getTotalLength() ermitteln. Hauptartikel: Schrift von Zauberhand

Siehe auch

• SVG/Tutorials/Pfade
• Schrift von Zauberhand

Weblinks

• Spezifikation (W3C): PathLength Attribute
• MDN: pathLength
• caniuse: pathLength
• Beispiel: 2020 SVG Animation Using pathLength=1 with stroke-dashoffset Tutorial @keyframers 2.29.0