Diepath()CSSFunktion akzeptiert einenSVG-Pfad als Zeichenkette und wird in den ModulenCSS-Formen undCSS-Bewegungspfade verwendet, um eine Form zu zeichnen. Diepath()-Funktion ist ein<basic-shape> Datentypwert. Sie kann in den CSS-Eigenschaftenoffset-path undclip-path sowie im SVG-Attributd verwendet werden.

Es gibt einige Einschränkungen bei der Verwendung derpath()-Funktion. Der Pfad muss als einzelne Zeichenkette definiert sein, sodass ein benutzerdefinierter Pfad nicht mit Variablen (var() Funktionen) erstellt werden kann. Außerdem werden alle Längen im Pfad implizit inPixel (px)-Einheiten definiert; andere Einheiten können nicht verwendet werden. Dieshape() Funktion bietet mehr Flexibilität als diepath()-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>  <div></div></section>

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

Syntax

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

Bestimmt, welche Teile des Pfades sich innerhalb der Form befinden. Die möglichen Werte sind:

• nonzero: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein Strahl, der vom Punkt ausgeht, mehr von links nach rechts als von rechts nach links Pfadsegmente kreuzt, was zu einem Wert ungleich null führt. Dies ist der Standardwert, wenn<fill-rule> weggelassen wird.

• evenodd: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein Strahl, der vom Punkt ausgeht, eine ungerade Anzahl von Pfadsegmenten kreuzt. Dies bedeutet, dass der Strahl jedes Mal, wenn er in die Form eintritt, die Form nicht genauso oft verlassen hat, was eine ungerade Anzahl von Eintritten ohne entsprechende Austritte anzeigt.

Warnung:<fill-rule> wird inoffset-path nicht unterstützt und macht die Eigenschaft ungültig, wenn es verwendet wird.

<string>

EineDatenzeichenkette, in Anführungszeichen eingeschlossen, die einenSVG-Pfad definiert. Die SVG-Pfad-Datenzeichenkette enthältPfadbefehle, die implizit Pixeleinheiten verwenden. Ein leerer Pfad wird als ungültig betrachtet.

Rückgabewert

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

Formale Syntax

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

<fill-rule> =
nonzero|
evenodd

Beispiele

Verwendung einerpath()-Funktion alsoffset-path-Wert

In dem folgenden Beispiel wurde einepath()-Funktion alsoffset-path Wert angegeben, um einen elliptischen Pfad für eine Kugel bereitzustellen, die entlang des Pfades bewegt werden soll.

<div>  <div></div></div><button>animate</button>

#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",    },  );});

Ändern des Wertes des SVG-Pfad-d-Attributs

Diepath()-Funktion kann verwendet werden, um den Wert des SVG-Attributsd zu ändern, das in Ihrem CSS auch aufnone gesetzt werden kann.

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

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

<svg 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

Browser-Kompatibilität

Siehe auch

• <shape-outside>
• CSS-Formen Modul
• Übersicht über CSS-Formen
• Der SVGpath-Syntax: ein illustrierter Leitfaden über CSS-tricks (2021)