ry

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

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

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 <length>-, <percentage>- oder auto-Schlüsselwortwert bezeichnet den vertikalen Radius von Ellipsen und den vertikalen Randradius von Rechtecken.

<length>

Absolute oder relative Längen können in jeder vom CSS <length>-Datentyp erlaubten Einheit ausgedrückt werden. 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 auf auto gesetzt oder standardmäßig darauf zurückgegriffen wird, entspricht der ry-Wert dem absoluten Längenwert, der für rx verwendet wird. Wenn sowohl ry als auch rx den berechneten Wert auto haben, beträgt der verwendete Wert 0.

Formale Definition

Initialer Wert0
Anwendbar aufellipse 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

Erstellen abgerundeter Ecken

Dieses Beispiel zeigt, wie man Rechtecke mit abgerundeten Ecken erstellt, indem man die ry-Eigenschaft auf SVG-<rect>-Elemente anwendet.

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 verwendet standardmäßig auto; da alle rx-Werte in diesem Beispiel ebenfalls standardmäßig auf auto gesetzt sind, beträgt 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 beträgt, 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 nie mehr als 50% der Höhe des Rechtecks beträgt, ist der Effekt so, als wäre ry: 50%; rx: 50% gesetzt.

Definition des vertikalen Radius einer Ellipse

Dieses grundlegende <ellipse>-Beispiel zeigt die CSS-ry-Eigenschaft, die gegenüber einem SVG-ry-Attribut Vorrang hat, um den vertikalen Radius der Form zu definieren.

HTML

Wir fügen zwei identische <ellipse>-Elemente in ein SVG ein; jedes mit dem 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 Standardbenutzeragentenstile verwenden (wobei fill 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.

Prozentwerte für den vertikalen Ellipsenradius

Dieses Beispiel zeigt die Verwendung von Prozentwerten 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 dem vorherigen Beispiel ähnlich, mit dem einzigen Unterschied, dass der ry-Eigenschaftswert in diesem Fall ein Prozentwert ist.

css
svg {
  border: 1px solid;
}

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

Ergebnisse

Bei der Verwendung von Prozentwerten für ry 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 betrug, beträgt der ry-Wert 45px, wodurch die Ellipse 90px hoch wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# RY

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch