SVGRectElement: ry-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die ry-Eigenschaft der Schnittstelle SVGRectElement ist eine schreibgeschützte Eigenschaft, die die vertikale Kurve der Ecken eines SVG-Rechtecks als SVGAnimatedLength beschreibt. Die Länge wird in Benutzereinheitensystemen entlang der y-Achse angegeben. Ihre Syntax entspricht der für \<length>.
Sie spiegelt das Präsentationsattribut <rect> des ry-Elements wider. Die CSS-Eigenschaft ry hat Vorrang vor dem ry-Präsentationsattribut von SVG, sodass der Wert möglicherweise nicht die tatsächliche Größe der abgerundeten Ecken widerspiegelt. Der Standardwert ist 0, was ein Rechteck mit eckigen 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 auf die berechneten Werte der ry-Attribute zugreifen:
const rectangles = document.querySelectorAll("rect");
const rySize0 = rectangle[0].ry;
const rySize1 = rectangle[1].ry;
console.log(rySize0.baseVal.value); // output: 15 (the value of `ry`)
console.log(rySize1.baseVal.value); // output: 30 (15% of 200)
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRectElement__ry |