ry

Die ry CSS Eigenschaft definiert den y-Achsen- oder vertikalen Radius eines SVG-<ellipse> und die vertikale Rundung der Ecken eines SVG-<rect> Rechtecks. Wenn vorhanden, überschreibt sie das ry Attribut der Form.

Hinweis: Die ry Eigenschaft gilt nur für die <ellipse> und <rect> Elemente, die in einem <svg> eingebettet sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudoelemente.

Syntax

css
/* Initial value */
ry: auto;

/* Length and percentage values */
ry: 30px;
ry: 30%;

/* Global values */
ry: inherit;
ry: initial;
ry: revert;
ry: revert-layer;
ry: unset;

Werte

Der Wert <length>, <percentage> oder das Schlüsselwort auto bezeichnen den vertikalen Radius von Ellipsen und den vertikalen Rahmenradius von Rechtecken.

<length>

Absolute oder relative Längen können in allen Einheiten dargestellt werden, die durch den CSS-Datentyp <length> erlaubt sind. Negative Werte sind ungültig.

<percentage>

Prozentwerte beziehen sich auf die Höhe des aktuellen SVG-Viewports. Der verwendete Wert für ein <rect> überschreitet niemals 50% der Höhe des Rechtecks.

auto

Wenn auto gesetzt ist oder die Standardeinstellung ist, entspricht der ry Wert dem absoluten Längenwert, der für rx verwendet wird. Wenn sowohl ry als auch rx auf auto berechnet wurden, ist der verwendete Wert 0.

Formale Definition

Anfangswert0
Anwendbar auf<ellipse> and <rect> elements in <svg>
VererbtNein
Prozentwerterefer to the height of the current SVG viewport
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
Animationstypby computed value type

Formale Syntax

ry = 
<length-percentage> |
auto

<length-percentage> =
<length> |
<percentage>

Beispiele

Abgerundete Ecken erstellen

Dieses Beispiel demonstriert das Erstellen von Rechtecken mit abgerundeten Ecken durch die Anwendung der ry Eigenschaft auf SVG <rect> Elemente.

HTML

Wir fügen ein SVG-Bild mit vier <rect> Elementen ein; alle Rechtecke sind gleich außer ihrem x Attributwert, der sie entlang der x-Achse positioniert.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="120" y="5" x="5" />
  <rect width="50" height="120" y="5" x="60" />
  <rect width="50" height="120" y="5" x="115" />
  <rect width="50" height="120" y="5" x="170" />
  <rect width="50" height="120" y="5" x="225" />
</svg>

CSS

Mit CSS setzen wir einen ry Wert auf vier der Rechtecke:

css
svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  ry: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  ry: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  ry: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  ry: 80%;
  fill: green;
}

Ergebnisse

Das erste Rechteck hat den Standardwert auto; da alle rx Werte in diesem Beispiel ebenfalls auf auto standardisieren, ist der verwendete Wert von ry 0. Die roten und blauen Rechtecke haben abgerundete Ecken von 10px bzw. 2em. Da der SVG-Viewport standardmäßig 300px mal 150px ist, erzeugt der 5% Wert des orangefarbenen Rechtecks einen Radius von 7.5px. Das grüne Rechteck hat ry: 80% gesetzt. Da der Wert von ry jedoch niemals mehr als 50% der Höhe des Rechtecks ist, wirkt es, als ob ry: 50%; rx: 50% gesetzt worden wäre.

Den vertikalen Radius einer Ellipse definieren

Dieses grundlegende <ellipse> Beispiel zeigt, wie die CSS ry Eigenschaft vorrangig gegenüber einem SVG ry Attribut verwendet wird, um den vertikalen Radius der Form zu definieren.

HTML

Wir fügen zwei identische <ellipse> Elemente in ein SVG ein; jedes hat das ry Attribut auf 20 gesetzt.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

Wir stylen nur die erste Ellipse und lassen ihren Zwilling die Standardnutzeragentenstile verwenden (mit fill, die standardmäßig schwarz ist). Die geometrische ry Eigenschaft überschreibt den Wert des SVG ry Attributs. Wir setzen auch die fill und stroke Eigenschaften, um die gestylte Form von ihrem Zwilling zu unterscheiden.

css
svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

Ergebnisse

Der vertikale Radius der gestylten Ellipse beträgt 80px, wie im CSS ry Eigenschaftswert definiert. Der vertikale Radius der ungestylten Ellipse beträgt 20px, wie durch das ry Attribut definiert.

Prozentsatzwerte für den vertikalen Radius einer Ellipse

Dieses Beispiel zeigt die Nutzung von Prozentsatzwerten für ry.

HTML

Wir verwenden das gleiche Markup wie im vorherigen Beispiel.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

Das CSS ist ähnlich wie im vorherigen Beispiel, mit dem einzigen Unterschied, dass der ry Eigenschaftswert hier ein Prozentwert ist.

css
svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

Ergebnisse

Wenn Prozentsatzwerte für ry verwendet werden, beziehen sich die Werte auf die Höhe des SVG-Viewports. Hier beträgt die Größe des vertikalen Radius der gestylten Ellipse 30% der Höhe des aktuellen SVG-Viewports. Da die Höhe standardmäßig 150px beträgt, ist der ry Wert 45px, wodurch die Ellipse 90px hoch wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# RY

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ry

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch