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. Bei 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 im CSS festgelegt, überschreibt der Wert der rx-Eigenschaft den Wert des rx-Attributs.

rect

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

Die Interpretation des rx-Attributswerts hängt sowohl vom ry-Attribut als auch von der Breite des Rechtecks ab:

Wenn ein ordnungsgemäß spezifizierter Wert für rx angegeben wird, aber 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 ordnungsgemäß spezifizierten Wert haben, wird der Browser ein Rechteck mit rechteckigen 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 halbe Breite des Rechtecks betrachten.

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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RX