ry CSS property

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 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 ausgedrückt werden, die vom CSS-<length> Datentyp erlaubt ist. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die Höhe des aktuellen SVG-Viewports. Der verwendete Wert für ein <rect> ist niemals mehr als 50% der Höhe des Rechtecks.

auto

Wenn mit auto eingestellt oder darauf voreingestellt, 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, beträgt der verwendete Wert 0.

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 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 für ihren x Attributwert, 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 ist auf auto voreingestellt; da auch alle rx-Werte in diesem Beispiel auf auto voreingestellt sind, ist der verwendete Wert von ry 0. Die roten und blauen Rechtecke haben entsprechend 10px und 2em abgerundete Ecken. Da der SVG-Viewport standardmäßig auf 300px mal 150px eingestellt ist, erzeugt der 5% Wert des orangefarbenen Rechtecks einen 7.5px Radius. Das grüne Rechteck hat ry: 80% eingestellt. Da jedoch der Wert von ry niemals mehr als 50% der Höhe des Rechtecks ist, ist die Wirkung so, als ob ry: 50%; rx: 50% eingestellt 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 zu definieren.

HTML

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

<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, während ihr Zwilling die Standardbenutzeragentenstile (mit fill standardmäßig schwarz) verwendet. Die geometrische ry-Eigenschaft überschreibt den Wert des SVG-ry Attributs. Wir setzen auch die fill und stroke-Eigenschaften, um die gestaltete 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 gestalteten Ellipse beträgt 80px, wie im CSS-ry-Eigenschaftswert definiert. Der vertikale Radius der ungestalteten Ellipse beträgt 20px, der durch das ry-Attribut definiert wurde.

Prozentwerte für den vertikalen Radius der Ellipse

Dieses Beispiel zeigt 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 ähnlich wie im vorherigen Beispiel, 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-Viewports. Hier beträgt die Größe des vertikalen Radius der gestalteten Ellipse 30% der Höhe des aktuellen SVG-Viewports. Da die Höhe standardmäßig auf 150px eingestellt ist, beträgt der ry-Wert 45px, wodurch die Ellipse 90px hoch ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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