pathLength
Das pathLength-Attribut ermöglicht es Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten festzulegen. Dieser Wert wird dann verwendet, um die Abstandberechnungen des Browsers mit denen des Autors abzustimmen, indem alle Entfernungsberechnungen anhand des Verhältnisses 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 Strichoperationen. Grundsätzlich alle Berechnungen, die die Länge des Pfades erfordern. Zum Beispiel nimmt stroke-dasharray an, dass der Start des Pfades 0 und der Endpunkt den im pathLength-Attribut definierten Wert hat.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
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 den Autoren, eine Gesamtlänge für den Kreis in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
ellipse
Für <ellipse> ermöglicht pathLength den Autoren, eine Gesamtlänge für die Ellipse in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
line
Für <line> ermöglicht pathLength den Autoren, eine Gesamtlänge für die Linie in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
path
Für <path> ermöglicht pathLength den Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
polygon
Für <polygon> ermöglicht pathLength den Autoren, eine Gesamtlänge für die Form in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
polyline
Für <polyline> ermöglicht pathLength den Autoren, eine Gesamtlänge für die Form in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
rect
Für <rect> ermöglicht pathLength den Autoren, eine Gesamtlänge für das Rechteck in Benutzereinheiten festzulegen.
| Wert | <number> |
|---|---|
| Standardwert | none |
| Animierbar | Yes |
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PathLengthAttribute |