ry
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 Wert <length>
, <percentage>
oder das Schlüsselwort auto
bezeichnen den vertikalen Radius von Ellipsen und den vertikalen Rahmenradius von Rechtecken.
<length>
-
Absolute oder relative Längen können in allen Einheiten dargestellt werden, die durch den CSS-Datentyp
<length>
erlaubt sind. 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
auto
gesetzt ist oder die Standardeinstellung ist, entspricht derry
Wert dem absoluten Längenwert, der fürrx
verwendet wird. Wenn sowohlry
als auchrx
aufauto
berechnet wurden, ist der verwendete Wert0
.
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 demonstriert das Erstellen von Rechtecken mit abgerundeten Ecken durch die Anwendung der ry
Eigenschaft auf SVG <rect>
Elemente.
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.
<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 hat den Standardwert auto
; da alle rx
Werte in diesem Beispiel ebenfalls auf auto
standardisieren, ist 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 ist, 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 niemals mehr als 50%
der Höhe des Rechtecks ist, wirkt es, als ob ry: 50%; rx: 50%
gesetzt worden wäre.
Den vertikalen Radius einer Ellipse definieren
Dieses grundlegende <ellipse>
Beispiel zeigt, wie die CSS ry
Eigenschaft vorrangig gegenüber einem SVG ry
Attribut verwendet wird, um den vertikalen Radius der Form zu definieren.
HTML
Wir fügen zwei identische <ellipse>
Elemente in ein SVG ein; jedes hat das 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 ihren Zwilling die Standardnutzeragentenstile verwenden (mit fill
, die 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.
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.
Prozentsatzwerte für den vertikalen Radius einer Ellipse
Dieses Beispiel zeigt die Nutzung von Prozentsatzwerten 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, dass der ry
Eigenschaftswert hier ein Prozentwert ist.
svg {
border: 1px solid;
}
ellipse:first-of-type {
ry: 30%;
fill: magenta;
stroke: rebeccapurple;
}
Ergebnisse
Wenn Prozentsatzwerte für ry
verwendet werden, 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
beträgt, ist der ry
Wert 45px
, wodurch die Ellipse 90px
hoch wird.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RY |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ry |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
Siehe auch
- Geometrieeigenschaften:
ry
,cx
,cy
,r
,rx
,x
,y
,height
,height
fill
stroke
paint-order
- Kurzschreibweise für
border-radius
radial-gradient
<basic-shape>
Datentyp- SVG
ry
Attribut