ry

Das ry Attribut definiert einen Radius auf der y-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" 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 geometrischen Eigenschaft definiert werden. Wenn in CSS festgelegt, ü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 bereitgestellt wird (oder umgekehrt), wird der Browser den fehlenden Wert als dem definierten Wert gleich betrachten.
Wenn weder ry noch rx einen ordnungsgemäß angegebenen Wert haben, zeichnet der Browser ein Rechteck mit rechteckigen Ecken.
Wenn ry größer als die Hälfte der Breite des Rechtecks ist, betrachtet der Browser den Wert für ry als die Hälfte der Breite des Rechtecks.

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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RY

Siehe auch

CSS ry Eigenschaft