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

浏览器兼容性

另见