SVGRectElement: ry 屬性

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

SVGRectElement 介面中只讀的 ry 屬性,使用 SVGAnimatedLength 物件描述 SVG 矩形圓角的垂直半徑。其長度單位為使用者座標系沿 y 軸的單位。其語法與 <length> 相同。

它反映了 <rect> 元素的 ry 表現屬性。CSS 的 ry 屬性優先於 SVG 的 ry 表現屬性,因此該值可能無法反映圓角的實際大小。預設值為 0,繪製帶有直角的矩形。

一個 SVGAnimatedLength 物件。

示例

給定以下 SVG

html
<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>

我們可以訪問 ry 屬性的計算值

js
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)

規範

規範
Scalable Vector Graphics (SVG) 2
# __svg__SVGRectElement__ry

瀏覽器相容性

另見