path()
Die path()
CSS Funktion akzeptiert einen SVG-Pfad als Zeichenkette 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 Pixeleinheiten (px
) definiert; andere Einheiten können nicht verwendet werden. Die shape()
Funktion bietet mehr Flexibilität als die path()
-Funktion.
Probieren Sie es aus
Syntax
Verwendet in offset-path
oder d
:
path(<string>)
Verwendet in clip-path
:
path( [<fill-rule>,]? <string> )
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 Pfadsegmente kreuzt, was zu einer ungeraden Zählung 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 jedes Betreten der Form nicht die gleiche Anzahl an Austritten hat, was auf eine ungerade Anzahl von Eintritten ohne entsprechende Austritte hinweist.
Warning:
<fill-rule>
wird inoffset-path
nicht unterstü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 Pixeleinheiten 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
Beispiele korrekter Werte für path()
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
Verwendung einer path()
-Funktion als offset-path
-Wert
Eine path()
-Funktion wird im folgenden Beispiel als offset-path
-Wert bereitgestellt, um einen elliptischen Pfad zu schaffen, entlang dem 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-Pfadattributs d
Der path()
kann verwendet werden, um den Wert des SVG-Attributs d
zu ändern, das in Ihrem CSS auch auf none
gesetzt werden kann.
Das „V“-Symbol wird sich vertikal umdrehen, wenn Sie darüber fahren, sofern 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
path() | ||||||||||||
In clip-path | ||||||||||||
In d as CSS property | ||||||||||||
In offset-path | ||||||||||||
In shape-outside |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.