path()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2020⁩.

* Some parts of this feature may have varying levels of support.

Die path() CSS Funktion akzeptiert eine SVG path Zeichenkette und wird in den CSS Formen und CSS Bewegungs-Pfad Modulen 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 einzelne Zeichenkette definiert sein, sodass kein benutzerdefinierter Pfad 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 Pfads innerhalb der Form liegen. Die möglichen Werte sind:

nonzero: Ein Punkt gilt als innerhalb der Form liegend, wenn ein Strahl, der von diesem Punkt ausgeht, mehr von links nach rechts als von rechts nach links durch Pfadsegmente verläuft, was zu einem nicht-null Ergebnis führt. Dies ist der Standardwert, wenn <fill-rule> weggelassen wird.
evenodd: Ein Punkt gilt als innerhalb der Form liegend, wenn ein Strahl, der von diesem Punkt ausgeht, eine ungerade Anzahl von Pfadsegmenten kreuzt. Das bedeutet, dass der Strahl für jedes Mal, wenn er in die Form eintritt, nicht ebenso oft austritt, womit eine ungerade Anzahl von Eintritten ohne entsprechende Austritte angezeigt wird.

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

<string>

Ein Datenstring, der in Anführungszeichen eingeschlossen ist und einen SVG path definiert. Der SVG-Pfad-Datenstring enthält Pfadbefehle, 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, auf 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",
    },
  );
});

Modifizieren des Wertes des SVG path d Attributs

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

Das "V"-Symbol wird vertikal kippen, wenn Sie darüber fahren, wenn 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

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

Browser-Kompatibilität

Siehe auch

<shape-outside>
CSS Formen Modul
Übersicht der CSS-Formen
Der SVG path Syntax: ein illustrierter Leitfaden via CSS-tricks (2021)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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