SVG/Attribute/pathLength
Aus SELFHTML-Wiki
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 | |
---|---|
default-Wert | keiner |
erlaubt in | path, cirlce, ellipse,line, polygon, polyline, and rect |
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
Weblinks
- Spezifikation (W3C): PathLength Attribute
- MDN: pathLength
- caniuse: pathLength
- Beispiel: 2020 SVG Animation Using pathLength=1 with stroke-dashoffset Tutorial @keyframers 2.29.0