pathLength
Das Attribut pathLength
ermöglicht es Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten anzugeben. Dieser Wert wird dann verwendet, um die Distanzberechnungen des Browsers mit denen des Autors zu kalibrieren, indem alle Distanzberechnungen mit dem Verhältnis pathLength
/ (berechneter Wert der Pfadlänge) skaliert werden.
Dies kann die tatsächlich dargestellten Längen von Pfaden beeinflussen, einschließlich Textpfade, Animationspfade und verschiedene Strichoperationen. Grundsätzlich alle Berechnungen, die die Länge des Pfades benötigen. Zum Beispiel wird stroke-dasharray
davon ausgehen, dass der Start des Pfades bei 0 liegt und der Endpunkt der im pathLength
-Attribut definierten Wert ist.
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
ellipse
line
path
polygon
polyline
Für <polyline>
ermöglicht pathLength
Autoren, eine Gesamtlänge für die Form in Benutzereinheiten anzugeben.
Wert | <number> |
---|---|
Standardwert | none |
Animierbar | Ja |
rect
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # PathLengthAttribute |