path-length CSS property

Syntax

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

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

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

Werte

none

Es wird keine vom Autor festgelegte Pfadlänge angegeben, und für alle pfadbezogenen Berechnungen wird die vom User-Agent berechnete Pfadlänge verwendet.

<length>

Ein nicht negativer einheitenloser Wert, der eine vom Autor definierte gesamte Pfadlänge in Benutzereinheiten darstellt.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel definiert einen Pfad und zeigt, wie mithilfe der CSS-Eigenschaft path-length eine Pfadlänge darauf angewendet wird.

SVG

Unser SVG definiert ein einzelnes gekrümmtes <path>-Element mit einer farbigen stroke. Es enthält ein Attribut stroke-dasharray, das ein regelmäßiges gestricheltes Muster für die Kontur definiert.

<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 einen path-length-Wert auf dem <path>:

path {
  path-length: 500;
}

Ergebnisse

Das Festlegen eines großen path-length-Werts führt dazu, dass die Striche kleiner werden und häufiger auftreten.

Animieren von path-length

Ein wesentlicher Vorteil der Bereitstellung von path-length als CSS-Eigenschaft besteht darin, dass Sie darauf Standard-CSS-Funktionen wie Animationen und Übergänge anwenden können. Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie ein path-length mit einer CSS-Animation animiert wird.

HTML und SVG

Dieses Beispiel enthält denselben SVG-<path> wie das vorherige. Zusätzlich enthält es ein <input type="range">-Element, das verwendet werden kann, um den zur Laufzeit auf den <path> angewendeten Wert von path-length zu ändern. Außerdem fügen wir ein <output>-Element hinzu, um den aktuellen Schiebereglerwert anzuzeigen.

<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 Element :root definieren wir eine benutzerdefinierte CSS-Eigenschaft namens --path-length und geben ihr einen Anfangswert von 200. Anschließend setzen wir den path-length-Wert des <path>-Elements auf die Eigenschaft --path-length und legen darauf eine animation fest, die unendlich oft ausgeführt wird und zwischen Vorwärts- und Rückwärtsrichtung wechselt.

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

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 --path-length und dem mit 1.5 multiplizierten Wert --path-length.

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

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

JavaScript

Wir beginnen unser Skript damit, Referenzen auf die Elemente <input type="range">, <output> und :root abzurufen.

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

Als Nächstes fügen wir dem Bereichsschieberegler einen input-Event-Handler hinzu, sodass bei einer Änderung seines Werts das textContent-Attribut des <output>-Elements und der Wert der benutzerdefinierten Eigenschaft --path-length auf den neuen Wert des Schiebereglers gesetzt werden.

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

Ergebnisse

Passen Sie den Schieberegler an und beachten Sie, dass größere Werte zu einer kleineren Strichgröße führen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVG-Attribut pathLength