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.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die path()-Funktion in CSS akzeptiert eine SVG-Pfad-Zeichenkette und wird in den Modulen für CSS-Formen und CSS-Bewegungspfad verwendet, um eine Form zu zeichnen. Die path()-Funktion ist ein Wert des Datentyps <basic-shape>. 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 werden, sodass ein eigener Pfad nicht mit Variablen (var()-Funktionen) erstellt werden kann. Außerdem werden alle Längen im Pfad implizit in Pixel (px) 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. 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 verlaufende Pfadsegmente kreuzt, was zu einer nicht-nullzähligen Anzahl 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 für jede Eingabe in die Form nicht die gleiche Anzahl an Austritten hatte, was auf eine ungerade Anzahl von Ein- ohne entsprechende Austritte hinweist.
Warnung:
<fill-rule>wird nicht inoffset-pathunterstützt und seine Verwendung macht die Eigenschaft ungültig. -
<string>-
Eine Daten-Zeichenkette, die in Anführungszeichen enthalten ist und einen SVG-Pfad definiert. Die SVG-Pfad-Daten-Zeichenkette enthält Pfadbefehle, 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 einer path()-Funktion als offset-path-Wert
Eine path()-Funktion wurde im folgenden Beispiel als Wert von offset-path bereitgestellt, um einen elliptischen Pfad für die Bewegung eines Balls zu erzeugen.
<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 d-Attributs
Die path()-Funktion kann verwendet werden, um den Wert des SVG-Attributs d zu ändern, welches auch in Ihrem CSS auf none gesetzt werden kann.
Das "V"-Symbol wird sich vertikal umkehren, wenn Sie darüber schweben, 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
| Spezifikation |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |
Browser-Kompatibilität
Siehe auch
border-shape,shape-outside- Modul für CSS-Formen
- Übersicht über CSS-Formen
- Der SVG
path-Syntax: Ein illustrierter Leitfaden über CSS-tricks (2021)