pathLength
Mit dem Attribut pathLength können Sie die Gesamtlänge eines Pfads in Benutzereinheiten angeben. Dieser Wert wird verwendet, um die Entfernungsberechnungen des Browsers an die angegebene Länge anzupassen. Dazu werden alle Entfernungsberechnungen mit dem Verhältnis pathLength / (berechnete Pfadlänge) skaliert.
Dies kann sich auf die tatsächlich dargestellten Längen von Pfaden auswirken, unter anderem bei Textpfaden, Animationspfaden und verschiedenen Operationen für Konturlinien. Im Grunde betrifft es alle Berechnungen, die die Pfadlänge benötigen. stroke-dasharray geht beispielsweise davon aus, dass der Anfang des Pfads bei 0 liegt und sein Endpunkt dem im Attribut pathLength angegebenen Wert entspricht.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Hinweis:
Zum Attribut pathLength gibt es auch eine entsprechende CSS-Eigenschaft: path-length. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
circle
Bei <circle> können Sie mit pathLength die Gesamtlänge des Kreises in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
ellipse
Bei <ellipse> können Sie mit pathLength die Gesamtlänge der Ellipse in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
line
Bei <line> können Sie mit pathLength die Gesamtlänge der Linie in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
path
Bei <path> können Sie mit pathLength die Gesamtlänge des Pfads in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
polygon
Bei <polygon> können Sie mit pathLength die Gesamtlänge der Form in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
polyline
Bei <polyline> können Sie mit pathLength die Gesamtlänge der Form in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
rect
Bei <rect> können Sie mit pathLength die Gesamtlänge des Rechtecks in Benutzereinheiten angeben.
| Wert | <number> |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
Beispiel
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<style>
path {
fill: none;
stroke: black;
stroke-width: 2;
stroke-dasharray: 10;
}
</style>
<!-- No pathLength, the real length of the path is used. In that case, 100 user units -->
<path d="M 0,10 h100" />
<!-- compute everything like if the path length was 90 user units long -->
<path d="M 0,20 h100" pathLength="90" />
<!-- compute everything like if the path length was 50 user units long -->
<path d="M 0,30 h100" pathLength="50" />
<!-- compute everything like if the path length was 30 user units long -->
<path d="M 0,40 h100" pathLength="30" />
<!-- compute everything like if the path length was 10 user units long -->
<path d="M 0,50 h100" pathLength="10" />
</svg>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PathLengthAttribute |
Siehe auch
- CSS-Eigenschaft
path-length