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> 要素のプロパティへのアクセス、およびそれらを操作するメソッドを提供します。
インスタンスプロパティ
このインターフェイスには、親である 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 |
ブラウザーの互換性
Loading…