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. 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 ebenfalls mit der rx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der rx-Eigenschaftswert den rx-Attributwert.

Rechteck

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

Die Interpretation des Wertes des rx-Attributs 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), geht der Browser davon aus, dass der fehlende Wert gleich dem definierten ist.
  • Wenn weder rx noch ry einen ordnungsgemäß spezifizierten Wert haben, wird der Browser ein Rechteck mit rechtwinkligen Ecken zeichnen.
  • Wenn rx mehr als die Hälfte der Breite des Rechtecks beträgt, betrachtet der Browser den Wert von rx als die Hälfte der Breite des Rechtecks.
Wert <length> | <percentage> | auto
Standardwert auto
Animierbar Ja

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# RX

Siehe auch

  • CSS rx-Eigenschaft