rx

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

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

Beispiel

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