rx - SVG | MDN

ellipse

Für <ellipse> definiert rx den x-Radius der Form. Bei einem Wert kleiner oder gleich null wird die Ellipse nicht gezeichnet.

Wert	<length> \| <percentage> \| `auto`
Standardwert	`auto`
Animierbar	Ja

Hinweis: Der x-Radius von <ellipse> kann auch mit der Geometrie-Eigenschaft rx definiert werden. Wenn sie in CSS festgelegt ist, hat der Wert der Eigenschaft rx Vorrang vor dem Wert des Attributs rx.

rect

Für <rect> definiert rx den Radius auf der x-Achse der Ellipse, mit der die Ecken des Rechtecks abgerundet werden.

Wie der Wert des Attributs rx interpretiert wird, hängt sowohl vom Attribut ry als auch von der Breite des Rechtecks ab:

Wenn für rx, aber nicht für ry (oder umgekehrt) ein gültiger Wert angegeben ist, betrachtet der Browser den fehlenden Wert als gleich dem angegebenen Wert.
Wenn weder für rx noch für ry ein gültiger Wert angegeben ist, zeichnet der Browser ein Rechteck mit rechtwinkligen Ecken.
Wenn rx größer als die halbe Breite des Rechtecks ist, verwendet der Browser für rx die halbe Breite des Rechtecks.

Wert	<length> \| <percentage> \| `auto`
Standardwert	`auto`
Animierbar	Ja

Hinweis: Die horizontale Krümmung der Ecken von <rect> kann auch mit der Geometrie-Eigenschaft rx definiert werden. Wenn sie in CSS festgelegt ist, hat der Wert der Eigenschaft rx Vorrang vor dem Wert des Attributs rx.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # RX

Siehe auch

CSS-Eigenschaft rx

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden