rx
Das rx-Attribut definiert einen Radius auf der x-Achse.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="0" ry="25" />
<ellipse cx="150" cy="50" rx="25" ry="25" />
<ellipse cx="250" cy="50" rx="50" ry="25" />
<rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
<rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
<rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>
ellipse
Für <ellipse> definiert rx den x-Radius der Form. Bei einem Wert kleiner oder gleich null wird die Ellipse überhaupt nicht gezeichnet.
| Wert |
<length>
|
<percentage>
| auto
|
|---|---|
| Standardwert | auto |
| Animierbar | Ja |
Hinweis:
Der x-Radius der <ellipse> kann auch mit der rx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der rx-Eigenschaftswert den rx-Attributwert.
rect
Für <rect> definiert rx den Radius der x-Achse der Ellipse, die verwendet wird, um die Ecken des Rechtecks abzurunden.
Die Interpretation des Wertes des rx-Attributs hängt sowohl vom ry-Attribut als auch von der Breite des Rechtecks ab:
- Wenn ein korrekt angegebener Wert für
rx, aber nicht fürry(oder umgekehrt) bereitgestellt wird, dann betrachtet der Browser den fehlenden Wert als gleich dem definierten. - Wenn weder
rxnochryeinen korrekt angegebenen Wert haben, dann zeichnet der Browser ein Rechteck mit quadratischen Ecken. - Wenn
rxgrößer als die Hälfte der Breite des Rechtecks ist, dann betrachtet der Browser den Wert fürrxals die Hälfte der Breite des Rechtecks.
| Wert |
<length>
|
<percentage>
| auto
|
|---|---|
| Standardwert | auto |
| Animierbar | Ja |
Hinweis:
Die horizontale Krümmung der Ecken des <rect> kann ebenfalls mit der rx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt der rx-Eigenschaftswert den rx-Attributwert.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # RX |
Siehe auch
- CSS
rxEigenschaft