rx
Die rx
-Eigenschaft von CSS definiert den x-Achsen- oder horizontalen Radius eines SVG-<ellipse>
und die horizontale Krümmung der Ecken eines SVG-<rect>
-Rechtecks. Wenn vorhanden, überschreibt sie das rx
-Attribut der Form.
Syntax
/* Initial value */
rx: auto;
/* Length and percentage values */
rx: 20px;
rx: 20%;
/* Global values */
rx: inherit;
rx: initial;
rx: revert;
rx: revert-layer;
rx: unset;
Werte
Der <length>
, <percentage>
oder das auto
-Schlüsselwort bezeichnet den horizontalen Radius von Ellipsen und den horizontalen 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 Breite des aktuellen SVG-Viewports. Der verwendete Wert für ein
<rect>
beträgt niemals mehr als 50 % der Breite des Rechtecks. auto
-
Wenn auf
auto
gesetzt oder standardmäßigauto
, entspricht derrx
-Wert dem absoluten Längenwert, der fürry
verwendet wird. Wenn sowohlrx
als auchry
einen berechneten Wert vonauto
haben, ist der verwendete Wert0
.
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | <ellipse> and <rect> elements in <svg> |
Vererbt | Nein |
Prozentwerte | refer to the width of the current SVG viewport |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | by computed value type |
Formale Syntax
rx =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
Beispiele
Abgerundete Ecken erstellen
Dieses Beispiel zeigt, wie man Rechtecke mit abgerundeten Ecken erstellt, indem die rx
-Eigenschaft auf SVG-<rect>
-Elemente angewendet wird.
HTML
Wir fügen ein SVG-Bild mit vier <rect>
-Elementen ein; alle Rechtecke sind gleich, abgesehen von ihrem x
-Attributwert, der ihre Position entlang der x-Achse bestimmt.
<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 rx
-Wert für vier der Rechtecke:
svg {
border: 1px solid;
}
rect:nth-of-type(2) {
rx: 10px;
fill: red;
}
rect:nth-of-type(3) {
rx: 2em;
fill: blue;
}
rect:nth-of-type(4) {
rx: 5%;
fill: orange;
}
rect:nth-of-type(5) {
rx: 80%;
fill: green;
}
Ergebnisse
Das erste Rechteck verwendet standardmäßig auto
; da alle ry
-Werte in diesem Beispiel ebenfalls standardmäßig auto
sind, ist der verwendete Wert von rx
0
. Die roten und blauen Rechtecke haben abgerundete Ecken mit je 10px
und 2em
. Da der SVG-Viewport standardmäßig 300px mal 150px beträgt, erzeugt der 5%
-Wert des orangefarbenen Rechtecks einen Radius von 15px
. Das grüne Rechteck hat rx: 80%
gesetzt. Da der Wert von rx
jedoch nie mehr als 50%
der Breite des Rechtecks beträgt, ist die Wirkung, als ob rx: 50%; ry: 50%
gesetzt wäre.
Den horizontalen Radius einer Ellipse definieren
Dieses einfache <ellipse>
-Beispiel zeigt, dass die CSS-rx
-Eigenschaft Vorrang vor einem SVG-rx
-Attribut hat, um den horizontalen Radius der Form zu definieren.
HTML
Wir fügen zwei identische <ellipse>
-Elemente in ein SVG ein; jedes mit dem rx
-Attribut auf 20
gesetzt.
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="20" ry="40" />
<ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>
CSS
Wir stylen nur die erste Ellipse, während ihr Zwilling die Standard-Benutzeragentenstile verwendet (wobei fill
standardmäßig schwarz ist). Die geometrische rx
-Eigenschaft überschreibt den Wert des SVG-rx
-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 {
rx: 80px;
fill: magenta;
stroke: rebeccapurple;
}
Ergebnisse
Der horizontale Radius der gestylten Ellipse beträgt 80px
, wie im CSS-rx
-Eigenschaftswert definiert. Der horizontale Radius der ungestylten Ellipse beträgt 20px
, was durch das rx
-Attribut definiert wurde.
Prozentwerte des horizontalen Radius einer Ellipse
Dieses Beispiel zeigt die Verwendung von Prozentwerten für rx
.
HTML
Wir verwenden dasselbe Markup wie im vorherigen Beispiel.
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="20" ry="40" />
<ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>
CSS
Das CSS ist ähnlich wie im vorherigen Beispiel, mit dem einzigen Unterschied, dass der rx
-Eigenschaftswert ein Prozentwert ist.
svg {
border: 1px solid;
}
ellipse:first-of-type {
rx: 30%;
fill: magenta;
stroke: rebeccapurple;
}
Ergebnisse
Beim Verwenden von Prozentwerten für rx
beziehen sich die Werte auf die Breite des SVG-Viewports. Hier beträgt die Größe des horizontalen Radius der gestylten Ellipse 30%
der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig 300px
beträgt, beträgt der rx
-Wert 90px
.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RX |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rx |
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:
rx
,cx
,cy
,r
,ry
,x
,y
,width
,height
fill
stroke
paint-order
border-radius
Kurzform-Eigenschaftradial-gradient
<basic-shape>
Datentyp- SVG-
rx
-Attribut