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

Keine Autor-Pfadlänge ist angegeben und die eigene berechnete Pfadlänge des Benutzers wird für alle pfadbezogenen Berechnungen verwendet.

<length>

Ein nicht-negativer, einheitenloser Wert, der eine vom Autor definierte Gesamtlänge des Pfades in Benutzereinheiten repräsentiert.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel definiert einen Pfad und zeigt, wie man eine Pfadlänge darauf anwendet, indem man die path-length CSS-Eigenschaft nutzt.

SVG

Unser SVG definiert ein einziges kurviges <path> Element mit einem farbigen stroke. Es beinhaltet 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 dem <path>:

path {
  path-length: 500;
}

Ergebnisse

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

Animation von path-length

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

HTML und SVG

Dieses Beispiel enthält das gleiche SVG <path> wie das vorherige. Zusätzlich enthält es ein <input type="range"> Element, das verwendet werden kann, um den Wert von path-length, der auf das <path> zur Laufzeit angewendet wird, 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 namens --path-length und geben ihr einen Anfangswert von 200. Wir setzen dann den path-length Wert des <path> Elements auf die --path-length Eigenschaft und setzen eine animation, die eine unendliche Anzahl von Malen läuft und zwischen vorwärts und rückwärts alterniert.

: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 beginnen unser Skript, indem wir Referenzen zu den <input type="range">, <output> und :root Elementen greifen.

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 Bereichsschieberegler hinzu, sodass, wenn sein Wert geändert wird, der textContent des <output> Elements und der Wert der --path-length Benutzerdefinierten Eigenschaft auf den neuen Wert des Schiebereglers gesetzt wird.

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