ry
Baseline 2024Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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.
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 derry
-Wert dem absoluten Längenwert, der fürrx
verwendet wird. Wenn sowohlry
als auchrx
einen berechneten Wert vonauto
haben, wird als verwendeter Wert0
genommen.
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | <ellipse> and <rect> elements in <svg> |
Vererbt | Nein |
Prozentwerte | refer to the height of the current SVG viewport |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | by computed value type |
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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RY |
Browser-Kompatibilität
Siehe auch
- Geometrieeigenschaften:
ry
,cx
,cy
,r
,rx
,x
,y
,height
,height
fill
stroke
paint-order
border-radius
Kurzschreibweiseradial-gradient
<basic-shape>
Datentyp- SVG
ry
Attribut