CSS-Funktion path()
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.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Funktion path() nimmt eine Zeichenfolge entgegen, die einen SVG-Pfad beschreibt. Sie wird in den Modulen CSS Shapes und CSS Motion Path verwendet, um eine Form zu zeichnen. Die Funktion path() liefert einen Wert des Datentyps <basic-shape>. Sie kann in den CSS-Eigenschaften offset-path und clip-path sowie im SVG-Attribut d verwendet werden.
Die Verwendung von path() unterliegt einigen Einschränkungen. Der Pfad muss als einzelne Zeichenfolge definiert werden. Daher lässt sich mit Variablen (den var()-Funktionen) kein benutzerdefinierter Pfad erstellen. Außerdem werden alle Längen im Pfad implizit in Pixeln (px) angegeben; andere Einheiten können nicht verwendet werden. Die Funktion shape() bietet mehr Flexibilität als path().
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-
Legt fest, welche Bereiche des Pfads innerhalb der Form liegen. Mögliche Werte sind:
-
nonzero: Ein Punkt gilt als innerhalb der Form liegend, wenn ein von ihm ausgehender Strahl mehr Pfadsegmente von links nach rechts als von rechts nach links kreuzt. Die resultierende Anzahl ist dann ungleich null. Dies ist der Standardwert, wenn<fill-rule>weggelassen wird. -
evenodd: Ein Punkt gilt als innerhalb der Form liegend, wenn ein von ihm ausgehender Strahl eine ungerade Anzahl von Pfadsegmenten kreuzt. Der Strahl ist dann öfter in die Form eingetreten, als er sie verlassen hat.
Warnung:
<fill-rule>wird inoffset-pathnicht unterstützt. Seine Verwendung macht die Eigenschaft ungültig. -
<string>-
Eine in Anführungszeichen eingeschlossene Datenzeichenfolge, die einen SVG-Pfad definiert. Sie enthält Pfadbefehle, die implizit Pixeleinheiten verwenden. Ein leerer Pfad ist ungültig.
Rückgabewert
Gibt einen Wert des Typs <basic-shape> zurück.
Formale Syntax
<path()> =
path( <'fill-rule'>? , <string> )
<fill-rule> =
nonzero |
evenodd
Beispiele
Eine path()-Funktion als Wert für offset-path verwenden
Im folgenden Beispiel wird eine path()-Funktion als Wert für offset-path angegeben. Sie erstellt einen elliptischen Pfad, 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",
},
);
});
Den Wert des SVG-Pfad-Attributs d ändern
Mit path() lässt sich der Wert des SVG-Attributs d ändern. In CSS kann dafür auch none festgelegt werden.
Wenn d als CSS-Eigenschaft unterstützt wird, wird das „V“-Symbol beim Bewegen des Mauszeigers darüber vertikal gespiegelt.
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
| Spezifikation |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |
Browser-Kompatibilität
Siehe auch
border-shape,shape-outside- Modul CSS Shapes
- Überblick über CSS Shapes
- Die SVG-
path-Syntax: ein illustrierter Leitfaden auf CSS-Tricks (2021)