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 nimmt einen SVG-Pfad -String entgegen und wird in den Modulen CSS Shapes und CSS Motion Path verwendet, um eine Form zu zeichnen. Die path()-Funktion ist ein <basic-shape> Datentypwert. 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 einzelner String definiert werden, sodass ein benutzerdefinierter Pfad nicht mit Variablen (var() Funktionen) erstellt werden kann. Außerdem werden 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
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 aus gezeichneter Strahl mehr von links nach rechts als von rechts nach links verlaufende Pfadsegmente kreuzt, was zu einer ungleich null zählenden Anzahl führt. Dies ist der Standardwert, wenn<fill-rule>weggelassen wird. -
evenodd: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein vom Punkt aus gezeichneter Strahl eine ungerade Anzahl von Pfadsegmenten kreuzt. Das bedeutet, dass jedes Mal, wenn der Strahl die Form betritt, er sie nicht in der gleichen Anzahl verlässt, was eine ungerade Anzahl von Eintritten ohne entsprechende Austritte anzeigt.
Warnung:
<fill-rule>wird nicht inoffset-pathunterstützt und die Verwendung macht die Eigenschaft ungültig. -
<string>-
Ein Datenstring, der in Anführungszeichen steht und einen SVG-Pfad definiert. Der SVG-Pfad-Datenstring enthält Pfadbefehle, die implizit Pixel-Einheiten 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 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 dessen sich ein Ball bewegt.
<div id="path">
<div id="ball"></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
Die path()-Funktion 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 dreht sich vertikal, wenn Sie darüber fahren, falls d 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 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 Shapes Modul
- Übersicht der CSS Shapes
- Der SVG
pathSyntax: ein illustrierter Leitfaden via CSS-tricks (2021)