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 abzustimmen, 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 Strichoperationen. Grundsätzlich alle Berechnungen, die die Länge des Pfades erfordern. stroke-dasharray nimmt beispielsweise an, dass der Start des Pfades 0 ist und der Endpunkt der im pathLength-Attribut definierte Wert.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html,
body,
svg {
  height: 100%;
}

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 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 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 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 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 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 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 den 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