ry

Das ry-Attribut definiert einen Radius auf der y-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" ry="0" rx="25" />
  <ellipse cx="150" cy="50" ry="25" rx="25" />
  <ellipse cx="250" cy="50" ry="50" rx="25" />

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

ellipse

Für <ellipse> definiert ry den y-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 y-Radius der <ellipse> kann auch mit der ry Geometrics-Eigenschaft definiert werden. Wenn er in CSS festgelegt ist, überschreibt der ry-Eigenschaftswert den ry-Attributwert.

rect

Für <rect> definiert ry den y-Achsen-Radius der Ellipse, die verwendet wird, um die Ecken des Rechtecks abzurunden.

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

  • Wenn ein ordnungsgemäß angegebener Wert für ry, aber nicht für rx (oder umgekehrt) bereitgestellt wird, nimmt der Browser den fehlenden Wert als gleich dem definierten Wert an.
  • Wenn weder ry noch rx einen ordnungsgemäß angegebenen Wert haben, zeichnet der Browser ein Rechteck mit rechtwinkligen Ecken.
  • Wenn ry größer als die Hälfte der Breite des Rechtecks ist, nimmt der Browser den Wert für ry als die Hälfte der Breite des Rechtecks an.
Wert <length> | <percentage> | auto
Standardwert auto
Animierbar Ja

Hinweis: Die vertikale Krümmung der Ecken des <rect> kann auch mit der ry Geometrics-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der ry-Eigenschaftswert den ry-Attributwert.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# RY