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

html
<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 Autoren, eine Gesamtlänge für den Kreis in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

ellipse

Für <ellipse> ermöglicht pathLength Autoren, eine Gesamtlänge für die Ellipse in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

line

Für <line> ermöglicht pathLength Autoren, eine Gesamtlänge für die Linie in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

path

Für <path> ermöglicht pathLength Autoren, eine Gesamtlänge für den Pfad in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

polygon

Für <polygon> ermöglicht pathLength Autoren, eine Gesamtlänge für die Form in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

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

Für <rect> ermöglicht pathLength Autoren, eine Gesamtlänge für das Rechteck in Benutzereinheiten anzugeben.

Wert <number>
Standardwert none
Animierbar Ja

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# PathLengthAttribute