SVGRectElement

インスタンスプロパティ

このインターフェイスには、親である SVGGeometryElement から継承したプロパティもあります。

SVGRectElement.x 読取専用

指定された <rect> 要素の x 属性に対応する SVGAnimatedLength を返します。

SVGRectElement.y 読取専用

指定された <rect> 要素の y 属性に対応する SVGAnimatedLength を返します。

SVGRectElement.width 読取専用

指定された <rect> 要素の width 属性に対応する SVGAnimatedLength を返します。

SVGRectElement.height 読取専用

指定された <rect> 要素の height 属性に対応する SVGAnimatedLength を返します。

SVGRectElement.rx 読取専用

指定された <rect> 要素の rx 属性に対応する SVGAnimatedLength を返します。

SVGRectElement.ry 読取専用

指定された <rect> 要素の ry 属性に対応する SVGAnimatedLength を返します。

インスタンスメソッド

このインターフェイスは固有のメソッドを実装していませんが、親である SVGGeometryElement から継承したメソッドがあります。

例

SVG 矩形の色の変更

この例では、ユーザーがクリックするたびに、SVGRectElement の塗りつぶしの色をランダムな値に設定します。

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" id="myrect" />
  <text x="60" y="40" fill="white" font-size="40">クリック</text>
</svg>

CSS

#myrect {
  fill: blue;
  stroke-width: 1;
  stroke: black;
}

JavaScript

const myRect = document.querySelector("#myrect");

myRect.addEventListener("click", () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  myRect.style.fill = `rgb(${r} ${g} ${b})`;
});

結果

仕様書

ブラウザーの互換性

関連情報

• <rect>