path-length CSS property

Syntax

/* Keywords */
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 ist keine vom Autor definierte Pfadlänge angegeben und die eigene berechnete Pfadlänge des Benutzer-Agents wird für alle pfadbezogenen Berechnungen verwendet.

<length>

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

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Nutzung

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

SVG

Unser SVG definiert ein einzelnes gekrümmtes <path> Element mit einem farbigen stroke. Es enthält ein stroke-dasharray Attribut, das ein regelmäßiges gestricheltes Muster für den Strich 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 das <path>:

path {
  path-length: 500;
}

Ergebnisse

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

Animieren von path-length

Ein großer Vorteil, path-length als CSS-Eigenschaft verfügbar zu machen, ist, dass Sie Standard-CSS-Funktionen wie Animationen und Übergänge darauf anwenden können. Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie Sie eine path-length mit einer CSS-Animation animieren können.

HTML und SVG

Dieses Beispiel enthält das gleiche SVG <path> wie das vorherige. Zusätzlich beinhaltet es ein <input type="range"> Element, das verwendet werden kann, um den Wert der auf das <path> angewendeten path-length zur Laufzeit zu ändern. Wir fügen auch 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 :root Element definieren wir eine CSS benutzerdefinierte Eigenschaft, genannt --path-length, und geben ihr einen Anfangswert von 200. Dann setzen wir den path-length Wert des <path> Elements auf die --path-length Eigenschaft und setzen eine animation darauf, die eine unendliche Anzahl von Malen läuft und zwischen vorwärts und rückwärts 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 path-length Eigenschaft zwischen dem --path-length Wert und dem --path-length Wert multipliziert mit 1.5.

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

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

JavaScript

Wir starten unser Skript, indem wir Referenzen zu den <input type="range">, <output> und :root Elementen holen.

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

Als nächstes fügen wir einen input Ereignishandler zum Bereichs-Schieberegler hinzu, sodass, wenn sein Wert geändert wird, das textContent des <output> Elements und der Wert der --path-length benutzerdefinierten Eigenschaft 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, wie größere Werte zu einer kleineren Strichgröße führen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVG pathLength Attribut