← 返回首页

SVGRectElement - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

SVGRectElement

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

SVGRectElement インターフェイスは、 <rect> 要素のプロパティへのアクセス、およびそれらを操作するメソッドを提供します。

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGRectElement

In this article

インスタンスプロパティ

このインターフェイスには、親である 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

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

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

JavaScript

js
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})`;
});

結果

仕様書

Specification

Scalable Vector Graphics (SVG) 2
# InterfaceSVGRectElement

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

<rect>

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年8月18日 by MDN contributors.

View this page on GitHub • Report a problem with this content