ry

Syntax

/* 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 das 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 Einheit angegeben werden, die vom CSS-Datentyp <length> erlaubt ist. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die Höhe des aktuellen SVG-Anzeigefensters. Der angewandte Wert für ein <rect> beträgt nie mehr als 50% der Höhe des Rechtecks.

auto

Wenn auf auto gesetzt oder standardmäßig verwendet, entspricht der ry-Wert dem absoluten Längenwert, der für rx verwendet wird. Wenn sowohl ry als auch rx einen berechneten Wert von auto haben, wird als verwendeter Wert 0 genommen.

Formale Definition

Formale Syntax

ry = 
  <length-percentage>  |
  auto                 

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

Beispiele

Abgerundete Ecken erstellen

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

HTML

Wir fügen ein SVG-Bild mit vier <rect>-Elementen ein; alle Rechtecke sind gleich, mit Ausnahme ihres x-Attributwertes, der sie entlang der x-Achse positioniert.

<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:

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 nutzt standardmäßig auto; da alle rx-Werte in diesem Beispiel auch standardmäßig auto sind, ist der verwendete Wert von ry 0. Die roten und blauen Rechtecke haben jeweils Ecken mit 10px und 2em abgerundet. Da das SVG-Ansichtsfenster 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% eingestellt. Da der Wert von ry jedoch niemals mehr als 50% der Höhe des Rechtecks ist, ist der Effekt so, als ob ry: 50%; rx: 50% gesetzt wäre.

Den vertikalen Radius einer Ellipse definieren

Dieses grundlegende <ellipse>-Beispiel zeigt, dass die CSS-ry-Eigenschaft Vorrang vor einem SVG-ry-Attribut hat, um den vertikalen Radius der Form festzulegen.

HTML

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

<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 ihr Zwilling die Standard-User-Agent-Stile verwenden (wobei fill standardmäßig schwarz ist). Die geometrische ry-Eigenschaft überschreibt den Wert des SVG-ry-Attributs. Wir setzen auch die Eigenschaften fill und stroke, um die gestylte Form von ihrem Zwilling zu unterscheiden.

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, was durch das ry-Attribut definiert wurde.

Prozentwerte für den vertikalen Radius einer Ellipse

Dieses Beispiel demonstriert die Verwendung von Prozentwerten für ry.

HTML

Wir verwenden das gleiche Markup wie im vorherigen Beispiel.

<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 im ry-Eigenschaftswert; in diesem Fall verwenden wir einen Prozentwert.

svg {
  border: 1px solid;
}

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

Ergebnisse

Bei der Verwendung von Prozentwerten für ry sind die Werte relativ zur Höhe des SVG-Ansichtsfensters. Hier beträgt die Größe des vertikalen Radius der gestylten Ellipse 30% der Höhe des aktuellen SVG-Ansichtsfensters. Da die Höhe standardmäßig 150px war, beträgt der ry-Wert 45px, wodurch die Ellipse 90px hoch ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Geometrieeigenschaften: ry, cx, cy, r, rx, x, y, height, height
• fill
• stroke
• paint-order
• border-radius Kurzschreibweise
• radial-gradient
• <basic-shape> Datentyp
• SVG ry Attribut