SVGRectElement: rx プロパティ

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月.

rx は SVGRectElement インターフェイスの読み取り専用のプロパティで、 SVG 矩形の角の曲線部分の水平方向の大きさを SVGAnimatedLength として表します。長さは、x 軸方向のユーザー座標系の単位で表されます。構文は、 <length> と同じです。

これは、 <rect> 要素のプレゼンテーション属性 rx を反映します。 CSS のプロパティ rx が、SVG のプレゼンテーション属性 rx よりも優先されるため、この値は要素の角の実際の曲率を反映しない場合があります。既定値は 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>

rx 属性の計算値にアクセスすることができます。

const rectangles = document.querySelectorAll("rect");
const rxSize0 = rectangle[0].rx;
const rxSize1 = rectangle[1].rx;
console.log(rxSize0.baseVal.value); // 出力: 15 （`rx` の値）
console.log(rxSize1.baseVal.value); // 出力: 45 （300 の 15%）