`path-length` CSS property

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die CSS-Eigenschaft path-length legt eine gesamte Pfadlänge in Benutzereinheiten fest. Alle Pfadberechnungen werden anschließend mit dem Verhältnis path-length / (berechneter Wert der Pfadlänge) skaliert. Das gilt unter anderem für Textpfade, Animationspfade und verschiedene Operationen an Konturlinien.

Die Eigenschaft path-length gilt nur für die Elemente <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> und <rect>, die in einem <svg> verschachtelt sind.

Hinweis: Falls die CSS-Eigenschaft path-length angegeben ist, überschreibt sie das Attribut pathLength eines SVG-Elements. Diese Eigenschaft gilt nicht für andere SVG- oder HTML-Elemente oder Pseudoelemente als die oben aufgeführten.

Syntax

css

/* Keyword value */
path-length: none;

/* <length> values */
path-length: 0;
path-length: 70px;
path-length: 500px;

/* Global values */
path-length: inherit;
path-length: initial;
path-length: revert;
path-length: revert-layer;
path-length: unset;

Werte

none: Es ist keine vom Autor festgelegte Pfadlänge angegeben. Für alle pfadbezogenen Berechnungen wird die vom User Agent selbst berechnete Pfadlänge verwendet.
<length>: Ein nicht negativer <length>-Wert, der eine vom Autor festgelegte gesamte Pfadlänge angibt.

Formale Definition

Anfangswert	`none`
Anwendbar auf	The SVG `<path>`, `<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, and `<rect>` elements.
Vererbt	Nein
Berechneter Wert	The keyword `none` or an absolute length.
Animationstyp	by computed value

Formale Syntax

path-length = 
  none                |
  <length> [ 0 , ∞ ]

Beispiele

Grundlegende Verwendung

Dieses Beispiel definiert einen Pfad und zeigt, wie Sie ihm mit der CSS-Eigenschaft path-length eine Pfadlänge zuweisen.

SVG

Unser SVG definiert ein einzelnes gekrümmtes <path>-Element mit einem farbigen stroke. Das Attribut stroke-dasharray legt ein regelmäßiges Strichmuster für die Konturlinie fest.

html

<svg viewBox="0 0 600 200">
  <path
    d="M 30 100 C 150 20, 250 180, 380 100 S 520 20, 570 100"
    fill="none"
    stroke="#D85A30"
    stroke-width="4"
    stroke-dasharray="24 24"></path>
</svg>

CSS

Wir setzen für <path> einen path-length-Wert:

css

path {
  path-length: 500px;
}

Ergebnis

Ein großer path-length-Wert führt dazu, dass die Striche kleiner werden und häufiger auftreten.

`path-length` animieren

Ein wesentlicher Vorteil von path-length als CSS-Eigenschaft ist, dass Sie darauf CSS-Funktionen wie Animationen und Übergänge anwenden können. Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie Sie path-length mit einer CSS-Animation animieren.

HTML und SVG

Dieses Beispiel enthält denselben SVG-<path> wie das vorherige. Zusätzlich enthält es ein <input type="range">-Element, mit dem sich der auf <path> angewendete path-length-Wert zur Laufzeit ändern lässt. Ein <output>-Element zeigt den aktuellen Wert des Schiebereglers an.

html

<div>
  <label for="path-slider">Adjust path-length</label>
  <input type="range" id="path-slider" min="0" max="800" value="200" />
  <output>200</output>
</div>

CSS

Auf dem :root-Element definieren wir eine benutzerdefinierte CSS-Eigenschaft namens --path-length und geben ihr den Anfangswert 200px. Anschließend setzen wir den path-length-Wert des <path>-Elements auf die Eigenschaft --path-length und weisen ihm eine animation zu, die unendlich oft abläuft und dabei abwechselnd vorwärts und rückwärts ausgeführt wird.

css

:root {
  --path-length: 200px;
}

path {
  path-length: var(--path-length);
  animation: path-length-anim 2s alternate infinite ease-in-out;
}

div {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

Als Nächstes definieren wir den @keyframes-Block für die Animation. Er animiert die Eigenschaft path-length zwischen dem Wert von --path-length und dem mit 1.5 multiplizierten Wert von --path-length.

css

@keyframes path-length-anim {
  from {
    path-length: var(--path-length);
  }

  to {
    path-length: calc(var(--path-length) * 1.5);
  }
}

JavaScript

Zu Beginn unseres Skripts holen wir uns Referenzen auf die Elemente <input type="range">, <output> und :root.

const slider = document.querySelector("input");
const output = document.querySelector("output");
const rootElem = document.querySelector(":root");

Anschließend fügen wir dem Schieberegler einen input-Event-Handler hinzu. Wenn sich sein Wert ändert, werden sowohl textContent des <output>-Elements als auch der Wert der benutzerdefinierten Eigenschaft --path-length auf den neuen Wert des Schiebereglers gesetzt.

slider.addEventListener("input", () => {
  output.textContent = `${slider.value}px`;
  rootElem.style.setProperty("--path-length", `${slider.value}px`);
});