xywh()

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>

Gibt die <length-percentage> Werte für die x und y Koordinaten des Rechtecks an.

<length-percentage [0,∞]>

Gibt nicht negative <length-percentage> Werte für die Breite und Höhe des Rechtecks an. Der Mindestwert kann Null sein, und der Höchstwert hat keine Grenze.

round <'border-radius'>

Gibt den Radius der abgerundeten Ecken des Rechtecks an, wobei die gleiche Syntax wie bei der CSS border-radius Kurzschreibweise verwendet wird. Dieser Parameter ist optional.

Formale Syntax

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

Beispiele

Erstellen eines offset-paths mit xywh()

Im folgenden Beispiel verwendet die offset-path-Eigenschaft die xywh()-Funktion, um die Form des Pfads zu definieren, auf dem sich das Element, in diesem Fall ein magentafarbener Kasten, bewegt. Es werden zwei verschiedene Szenarien gezeigt, jedes mit unterschiedlichen Werten für die xywh()-Funktion. Der Pfeil innerhalb der Kästen zeigt auf den rechten Rand des Kastens.

<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 Pfades 1 wird um 20px von den linken und oberen Rändern des umgebenden Blocks versetzt. Dieses Pfad-Rechteck hat die gleichen Dimensionen wie der umgebende Block, das heißt, die Breite beträgt 100% der Breite des umgebenden Blocks und die Höhe beträgt 100% der Höhe des umgebenden Blocks. Beachten Sie, wie der Pfeil im Kasten der 10%-Kurve (definiert durch round 10%) an den eckigen Pfadecken folgt.
• Da das obere Limit sowohl für die Breite als auch die Höhe in xywh() unendlich ist, macht das Setzen der Höhe auf 200% im Rechteck des Pfades 2 das erzeugte Rechteck doppelt so hoch wie der umgebende Block. Beachten Sie, wie der Pfeil im Kasten sich an den Ecken verhält, wenn kein round <'border-radius'> angegeben ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• inset() Funktion
• rect() Funktion
• clip-path Eigenschaft
• offset-path Eigenschaft
• <basic-shape> Datentyp
• CSS-Formen Modul
• Leitfaden zu Grundformen