`path()` CSS-Funktion

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die path() CSS Funktion akzeptiert einen SVG-Pfad-String und wird in den Modulen CSS Shapes und CSS Motion Path verwendet, um eine Form zu zeichnen. Die path()-Funktion ist ein <basic-shape> Datentyp-Wert. Sie kann in den CSS-Eigenschaften offset-path und clip-path sowie im SVG-Attribut d verwendet werden.

Es gibt einige Einschränkungen bei der Verwendung der path()-Funktion. Der Pfad muss als ein einzelner String definiert werden, sodass ein benutzerdefinierter Pfad nicht mit Variablen (var()-Funktionen) erstellt werden kann. Außerdem sind alle Längen im Pfad implizit in Pixel (px)-Einheiten definiert; andere Einheiten können nicht verwendet werden. Die shape()-Funktion bietet mehr Flexibilität als die path()-Funktion.

Probieren Sie es aus

clip-path: path(
  "M  20  240 \
 L  20  80 L 160  80 \
 L 160  20 L 280 100 \
 L 160 180 L 160 120 \
 L  60 120 L  60 240 Z"
);

clip-path: path(
  "M 20 240 \
 C 20 0 300 0 300 240 Z"
);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntax

css

path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

/* When used in clip-path only */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

Parameter

<fill-rule> Optional

Definiert, welche Teile des Pfades innerhalb der Form liegen. Mögliche Werte sind:

nonzero: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein vom Punkt gezogener Strahl mehr von links nach rechts als von rechts nach links verlaufende Pfadsegmente kreuzt, was zu einer nicht-nullenden Zählung führt. Dies ist der Standardwert, wenn <fill-rule> ausgelassen wird.
evenodd: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein vom Punkt gezogener Strahl eine ungerade Anzahl von Pfadsegmenten kreuzt. Dies bedeutet, dass jedes Mal, wenn der Strahl die Form betritt, er sie nicht in gleicher Anzahl wieder verlassen hat, was auf eine ungerade Anzahl von Eintritten ohne entsprechende Austritte hinweist.

Warnung: <fill-rule> wird in offset-path nicht unterstützt, und seine Verwendung macht die Eigenschaft ungültig.

<string>

Ein Daten-String, der in Anführungszeichen enthalten ist und einen SVG-Pfad definiert. Der SVG-Pfad-Daten-String enthält Pfadkommandos, die implizit Pixel-Einheiten verwenden. Ein leerer Pfad wird als ungültig angesehen.

Rückgabewert

Gibt einen <basic-shape> Wert zurück.

Formale Syntax

<path()> = 
  path( <'fill-rule'>? , <string> )  

<fill-rule> = 
  nonzero  |
  evenodd

Beispiele

Verwendung einer `path()`-Funktion als `offset-path`-Wert

Eine path()-Funktion wurde im folgenden Beispiel als offset-path Wert bereitgestellt, um einen elliptischen Pfad zu erstellen, entlang dem sich ein Ball bewegt.

html

<div id="path">
  <div id="ball"></div>
</div>
<button>animate</button>

css

#path {
  margin: 40px;
  width: 400px;
  height: 200px;

  /* draw the gray ramp */
  background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}

#ball {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;

  /* mark the elliptical path */
  offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}

const btn = document.querySelector("button");
const ball = document.getElementById("ball");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", true);
  setTimeout(() => btn.removeAttribute("disabled"), 6000);

  ball.animate(
    // animate the offset path
    { offsetDistance: [0, "100%"] },
    {
      duration: 1500,
      iterations: 4,
      easing: "cubic-bezier(.667,0.01,.333,.99)",
      direction: "alternate",
    },
  );
});

Den Wert des SVG-Pfad-d-Attributs ändern

Das path() kann verwendet werden, um den Wert des SVG-d-Attributs zu ändern, welches in Ihrem CSS auch auf none gesetzt werden kann.

Das "V"-Symbol wird sich vertikal umdrehen, wenn Sie darüber fahren, falls d als CSS-Eigenschaft unterstützt wird.

CSS

css

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

/* This path is displayed on hover */
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

html

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

Ergebnis

Spezifikationen

Spezifikation
CSS Shapes Module Level 1 # funcdef-basic-shape-path

Browser-Kompatibilität

Siehe auch

shape-outside
CSS Shapes Modul
Überblick über CSS Shapes
Die SVG path Syntax: ein illustrierter Leitfaden via CSS-tricks (2021)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

path() CSS-Funktion

CSS

HTML

Ergebnis

Help improve MDN

`path()` CSS-Funktion