rx

Das rx Attribut definiert einen Radius auf der x-Achse.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

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>

ellipse

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

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

Hinweis: Der x-Radius der <ellipse> kann auch mit der rx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der Wert der rx-Eigenschaft den Wert des rx-Attributs.

rect

Für <rect> definiert rx den x-Achsen-Radius der Ellipse, die zum Abrunden der Ecken des Rechtecks verwendet wird.

Die Art und Weise, wie der Wert des rx-Attributs interpretiert wird, hängt sowohl vom ry Attribut als auch von der Breite des Rechtecks ab:

Wenn ein gültig spezifizierter Wert für rx angegeben wird, jedoch nicht für ry (oder umgekehrt), dann wird der Browser den fehlenden Wert als gleich dem definierten Wert betrachten.
Wenn weder rx noch ry einen gültig spezifizierten Wert haben, wird der Browser ein Rechteck mit eckigen Ecken zeichnen.
Wenn rx größer als die Hälfte der Breite des Rechtecks ist, wird der Browser den Wert für rx als die Hälfte der Breite des Rechtecks betrachten.

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

Hinweis: Die horizontale Krümmung der Ecken der <rect> kann auch mit der rx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der Wert der rx-Eigenschaft den Wert des rx-Attributs.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RX

Siehe auch

CSS rx-Eigenschaft