SVGRectElement: ry-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRectElement__ry |
Browser-Kompatibilität
Loading…