pathLength
Das pathLength Attribut ermöglicht es den Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten anzugeben. Dieser Wert wird dann verwendet, um die Entfernungsberechnungen des Browsers mit denen des Autors zu kalibrieren, indem alle Entfernungsberechnungen mit dem Verhältnis pathLength / (berechneter Wert der Pfadlänge) skaliert werden.
Dies kann die tatsächlich gerenderten Längen von Pfaden beeinflussen, einschließlich Textpfade, Animationspfade und verschiedene Stroke-Operationen. Grundsätzlich alle Berechnungen, die die Länge des Pfades erfordern. Zum Beispiel wird stroke-dasharray davon ausgehen, dass der Anfang des Pfades 0 ist und der Endpunkt der im pathLength Attribut definierte Wert ist.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Hinweis:
Das pathLength Attribut hat auch ein entsprechendes CSS-Eigenschaft: path-length. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
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>
circle
Für <circle> ermöglicht pathLength es den Autoren, eine Gesamtlänge für den Kreis in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
ellipse
Für <ellipse> ermöglicht pathLength es den Autoren, eine Gesamtlänge für die Ellipse in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
line
Für <line> ermöglicht pathLength es den Autoren, eine Gesamtlänge für die Linie in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
path
Für <path> ermöglicht pathLength es den Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
polygon
Für <polygon> ermöglicht pathLength es den Autoren, eine Gesamtlänge für die Form in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
polyline
Für <polyline> ermöglicht pathLength es den Autoren, eine Gesamtlänge für die Form in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
rect
Für <rect> ermöglicht pathLength es den Autoren, eine Gesamtlänge für das Rechteck in Benutzereinheiten anzugeben.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PathLengthAttribute |
Siehe auch
- CSS-Eigenschaft
path-length