SVGRectElement: ry プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

ry は SVGRectElement インターフェイスの読み取り専用のプロパティで、 SVG 矩形の角の曲線部分の垂直方向の大きさを SVGAnimatedLength として表します。長さは、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 属性の計算値にアクセスすることができます。

const rectangles = document.querySelectorAll("rect");
const rySize0 = rectangle[0].ry;
const rySize1 = rectangle[1].ry;
console.log(rySize0.baseVal.value); // 出力: 15 （`ry` の値）
console.log(rySize1.baseVal.value); // 出力: 30 （200 の 15%）