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.

Hinweis: Die rx-Eigenschaft gilt nur für <ellipse>- und <rect>-Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudo-Elemente.

Syntax

css
/* 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äßig auto, entspricht der rx-Wert dem absoluten Längenwert, der für ry verwendet wird. Wenn sowohl rx als auch ry einen berechneten Wert von auto haben, ist der verwendete Wert 0.

Formale Definition

Anfangswert0
Anwendbar auf<ellipse> and <rect> elements in <svg>
VererbtNein
Prozentwerterefer to the width of the current SVG viewport
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
Animationstypby 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.

html
<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:

css
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.

html
<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.

css
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.

html
<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.

css
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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