xywh()
Die xywh()
-Funktion in CSS erstellt ein Rechteck anhand der angegebenen Abstände von den linken (x
) und oberen (y
) Kanten des umgebenden Blocks sowie der angegebenen Breite (w
) und Höhe (h
) des Rechtecks. Es handelt sich um eine Grundform-Funktion des <basic-shape>
-Datentyps. Sie können die Funktion xywh()
in CSS-Eigenschaften wie offset-path
verwenden, um den rechteckigen Pfad zu erzeugen, entlang dessen sich ein Element bewegt, und in clip-path
, um die Form der Ausschnittsregion zu definieren.
Syntax
offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);
Werte
<length-percentage>
-
Bestimmt die Werte des
<length-percentage>
für diex
- undy
-Koordinaten des Rechtecks. <length-percentage [0,∞]>
-
Gibt nicht-negative
<length-percentage>
-Werte für die Breite und Höhe des Rechtecks an. Der Minimalwert kann null sein, und es gibt keine Obergrenze für den Maximalwert. round <'border-radius'>
-
Gibt den Radius der abgerundeten Ecken des Rechtecks mit der gleichen Syntax wie die CSS-Eigenschaft
border-radius
an. Dieser Parameter ist optional.
Formale Syntax
Beispiele
Erstellen eines offset-paths mit xywh()
Im folgenden Beispiel verwendet die Eigenschaft offset-path
die Funktion xywh()
, um die Form des Pfads zu definieren, auf dem sich das Element – in diesem Fall ein magenta-farbener Block – bewegt. Es werden zwei verschiedene Szenarien gezeigt, jeweils mit unterschiedlichen Werten für die Funktion xywh()
. Der Pfeil innerhalb der Blöcke zeigt auf die rechte Kante des Blocks.
<div class="container">
Rectangular path 1
<div class="path xywh-path-1">→</div>
</div>
<div class="container">
Rectangular path 2
<div class="path xywh-path-2">→</div>
</div>
.container {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 30px;
text-align: center;
}
.path {
width: 50px;
height: 50px;
position: absolute;
background-color: magenta;
animation: move 10s linear infinite;
}
.xywh-path-1 {
offset-path: xywh(20px 20px 100% 100% round 10%);
}
.xywh-path-2 {
offset-path: xywh(20px 30% 150% 200%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Ergebnis
- Das Rechteck des Pfads 1 ist um
20px
von den linken und oberen Kanten des umgebenden Blocks versetzt. Dieses Pfad-Rechteck hat die gleichen Dimensionen wie der umgebende Block, d. h. die Breite beträgt100%
der Breite des umgebenden Blocks und die Höhe100%
der Höhe des umgebenden Blocks. Beachten Sie, wie der Pfeil innerhalb des Blocks den10%
-Kurven (definiert durchround 10%
) an den rechteckigen Pfadecken folgt. - Da das obere Limit für Breite und Höhe in
xywh()
unendlich ist, erzeugt das Setzen der Höhe auf200%
im Rechteck Pfad 2 ein Rechteck, das doppelt so hoch ist wie der umgebende Block. Beachten Sie, wie der Pfeil innerhalb des Blocks sich an den Ecken verhält, wenn keinround <'border-radius'>
angegeben ist.
Spezifikationen
Specification |
---|
CSS Shapes Module Level 1 # funcdef-basic-shape-xywh |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
xywh() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
Siehe auch
inset()
-Funktionrect()
-Funktionclip-path
-Eigenschaftoffset-path
-Eigenschaft<basic-shape>
Datentyp- CSS Shapes-Modul
- Leitfaden zu Grundformen