ry
Das Attribut ry definiert einen Radius auf der y-Achse.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
ellipse
Bei <ellipse> definiert ry den y-Radius der Form. Ist der Wert kleiner oder gleich null, wird die Ellipse nicht gezeichnet.
| Wert |
<length>
|
<percentage>
| auto
|
|---|---|
| Standardwert | auto |
| Animierbar | Ja |
Hinweis:
Der y-Radius von <ellipse> kann auch mit der ry-Geometrieeigenschaft definiert werden. Wenn die ry-Eigenschaft in CSS festgelegt ist, hat ihr Wert Vorrang vor dem Wert des ry-Attributs.
rect
Bei <rect> definiert ry den Radius auf der y-Achse der Ellipse, mit der die Ecken des Rechtecks abgerundet werden.
Wie der Wert des ry-Attributs interpretiert wird, hängt sowohl vom Attribut rx als auch von der Breite des Rechtecks ab:
- Wenn für
ry, aber nicht fürrxein gültiger Wert angegeben ist (oder umgekehrt), betrachtet der Browser den fehlenden Wert als gleich dem angegebenen Wert. - Wenn weder
rynochrxeinen gültigen Wert hat, zeichnet der Browser ein Rechteck mit rechtwinkligen Ecken. - Wenn
rygrößer als die halbe Breite des Rechtecks ist, verwendet der Browser als Wert fürrydie halbe Breite des Rechtecks.
| Wert |
<length>
|
<percentage>
| auto
|
|---|---|
| Standardwert | auto |
| Animierbar | Ja |
Hinweis:
Die vertikale Krümmung der Ecken von <rect> kann auch mit der ry-Geometrieeigenschaft definiert werden. Wenn die ry-Eigenschaft in CSS festgelegt ist, hat ihr Wert Vorrang vor dem Wert des ry-Attributs.
Beispiel
<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>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # RY |
Siehe auch
- CSS-Eigenschaft
ry