ry - SVG | MDN

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 Geometrie-Eigenschaft bestimmt werden. Wenn sie in CSS gesetzt ist, überschreibt der ry-Eigenschaftswert den ry-Attributwert.

rect

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

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

Wenn ein ordnungsgemäß spezifizierter Wert für ry, aber nicht für rx, angegeben wird (oder umgekehrt), setzt der Browser den fehlenden Wert dem definierten gleich.
Wenn weder ry noch rx einen ordnungsgemäß spezifizierten Wert haben, zeichnet der Browser ein Rechteck mit scharfen 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 der <rect> kann auch mit der ry Geometrie-Eigenschaft bestimmt werden. Wenn sie in CSS gesetzt ist, überschreibt der ry-Eigenschaftswert den ry-Attributwert.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RY

Siehe auch

CSS ry property

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden