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

Ein Wert vom Typ <length> oder <percentage> oder das Schlüsselwort auto gibt den vertikalen Radius von Ellipsen und den vertikalen Eckenradius von Rechtecken an.

<length>

Absolute oder relative Längen können in jeder Einheit angegeben werden, die der CSS-Datentyp <length> zulässt. Negative Werte sind ungültig.

<percentage>

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

auto

Wenn ry auf auto gesetzt ist oder standardmäßig diesen Wert hat, entspricht der Wert von ry dem für rx verwendeten absoluten Längenwert. Haben sowohl ry als auch rx den berechneten Wert auto, ist der verwendete Wert 0.

Formale Definition

Formale Syntax

ry = 
  <length-percentage>  |
  auto                 

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

Beispiele

Abgerundete Ecken erstellen

Dieses Beispiel zeigt, wie Sie Rechtecke mit abgerundeten Ecken erstellen, indem Sie die Eigenschaft ry auf SVG-<rect>-Elemente anwenden.

HTML

Wir fügen ein SVG-Bild mit fünf <rect>-Elementen ein. Die Rechtecke unterscheiden sich nur im Wert ihres x-Attributs, 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 legen wir für vier der Rechtecke einen ry-Wert fest:

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;
}

Ergebnis

Beim ersten Rechteck ist der Standardwert auto. Da auch alle rx-Werte in diesem Beispiel standardmäßig auto sind, beträgt der verwendete Wert von ry 0. Das rote und das blaue Rechteck haben Eckenradien von 10px beziehungsweise 2em. Da der SVG-Viewport standardmäßig 300px breit und 150px hoch ist, ergibt der Wert 5% des orangefarbenen Rechtecks einen Radius von 7.5px. Für das grüne Rechteck ist ry: 80% festgelegt. Da der Wert von ry jedoch nie mehr als 50% der Höhe des Rechtecks beträgt, ist der Effekt derselbe wie bei ry: 50%; rx: 50%.

Den vertikalen Radius einer Ellipse definieren

Dieses einfache <ellipse>-Beispiel zeigt, dass die CSS-Eigenschaft ry Vorrang vor einem SVG-ry-Attribut hat, wenn der vertikale Radius der Form bestimmt wird.

HTML

Wir fügen zwei identische <ellipse>-Elemente in ein SVG ein, bei denen das Attribut ry jeweils auf 20 gesetzt ist.

<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 gestalten nur die erste Ellipse und belassen die zweite bei den Standardstilen des User-Agents (wobei fill standardmäßig schwarz ist). Die geometrische Eigenschaft ry überschreibt den Wert des SVG-Attributs ry. Außerdem legen wir die Eigenschaften fill und stroke fest, um die gestaltete Ellipse von der anderen zu unterscheiden.

svg {
  border: 1px solid;
}

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

Ergebnis

Der vertikale Radius der gestalteten Ellipse beträgt 80px, wie durch den Wert der CSS-Eigenschaft ry festgelegt. Der vertikale Radius der nicht gestalteten Ellipse beträgt 20px, wie durch das Attribut ry festgelegt.

Prozentwerte für den vertikalen Radius einer Ellipse

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

HTML

Wir verwenden dasselbe 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 ähnelt dem vorherigen Beispiel. Der einzige Unterschied ist der Wert der Eigenschaft ry: In diesem Fall verwenden wir einen Prozentwert.

svg {
  border: 1px solid;
}

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

Ergebnis

Bei Prozentwerten für ry beziehen sich die Werte auf die Höhe des SVG-Viewports. Hier beträgt der vertikale Radius der gestalteten Ellipse 30% der Höhe des aktuellen SVG-Viewports. Da die Höhe standardmäßig 150px beträgt, ergibt sich für ry ein Wert von 45px. Die Ellipse ist damit 90px hoch.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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