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 des SVGRectElement-Interfaces ist eine schreibgeschützte Eigenschaft, die die horizontale Kurve der Ecken eines SVG-Rechtecks als SVGAnimatedLength beschreibt. Die Länge wird in Benutzerkoordinateneinheiten entlang der x-Achse angegeben. Ihre Syntax entspricht der für \<length>.
Sie spiegelt das präsentationsbezogene Attribut <rect> des Elements rx wider. Die CSS-Eigenschaft rx hat Vorrang vor dem SVG-rx-Attribut, sodass der Wert möglicherweise nicht die tatsächliche Größe der abgerundeten Ecken widerspiegelt. Der Standardwert ist 0, was ein Rechteck mit rechtwinkligen Ecken zeichnet.
Wert
Ein SVGAnimatedLength.
Beispiel
Gegeben 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 auf die berechneten Werte der rx-Attribute zugreifen:
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 |