SVGRectElement: rx-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die rx-Eigenschaft der Schnittstelle SVGRectElement beschreibt die horizontale Kurve der Ecken eines SVG-Rechtecks als ein SVGAnimatedLength. Die Länge wird in Einheiten des Benutzerskoordinatensystems entlang der x-Achse angegeben. Die Syntax ist die gleiche wie die für <length>.
Sie spiegelt das Präsentationsattribut <rect>-Element rx wider. Die CSS-Eigenschaft rx hat Vorrang vor dem SVG-Präsentationsattribut rx, daher könnte der Wert nicht die tatsächliche Größe der abgerundeten Ecken widerspiegeln. Der Standardwert ist 0, was ein Rechteck mit rechtwinkligen Ecken zeichnet.
Wert
Ein SVGAnimatedLength.
Beispiel
Für das folgende SVG:
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="60" height="60" rx="15" ry="15" />
<rect x="60" y="0" width="60" height="60" rx="15%" ry="15" />
</svg>
können wir die berechneten Werte der rx-Attribute abrufen:
const rectangles = document.querySelectorAll("rect");
const rxSize0 = rectangle[0].rx;
const rxSize1 = rectangle[1].rx;
console.log(rxSize0.baseVal.value); // output: 15 (the value of `rx`)
console.log(rxSize1.baseVal.value); // output: 45 (15% of 300)
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRectElement__rx |
Browser-Kompatibilität
BCD tables only load in the browser