SVGRect は矩形を表します。矩形は、最小の x の値と最小の y の値を特定する x と y の座標の対と、幅と、高さから構成されており、これらは、非負であるものと考えられます。

SVGRect オブジェクトは、読み取り専用だと指定することができます。そのことは、そのオブジェクトをいじろうとする試みによって、例外が投げられるという結果になるだろう、ということを意味します。

属性

このインタフェースは、親から、すなわち  SVGGeometryElement から、属性を継承してもいます。

SVGRect.x 読取専用
この座標の厳密な結果は、各要素に依存します。もしこの属性が指定済みでなければ、結果は、あたかも 0 という値が指定されているかのようになります。
SVGRect.y 読取専用
この座標の厳密な結果は、各要素に依存します。もしこの属性が指定済みでなければ、結果は、あたかも 0 という値が指定されているかのようになります。
SVGRect.width 読取専用
これは矩形の幅を表します。負の値はエラーを招きます。0 という値は要素の描画を無効にします。
SVGRect.height 読取専用
これは矩形の高さを表します。負の値はエラーを招きます。0 という値は要素の描画を無効にします。

設定に際しての例外: 読み取り専用の属性の値を変えようとする試みに対しては、 NO_MODIFICATION_ALLOWED_ERR というコードをともなう DOMException  が生じます。

メソッド

このインタフェースは、親から、すなわち SVGGeometryElement から、メソッドを継承しています。

矩形インタフェースの単純な利用法をここに示します (クリックのたびに矩形インタフェースの色を変化させます)。

SVG の内容

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" id="myrect" onclick="doRectClick()"
      style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  <text x="60" y="40" fill="white" font-size="40"
      onclick="doRectClick();">Click Me</text>
</svg>

JavaScript の内容

function doRectClick(){
  var myrect = document.getElementById('myrect');
  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);
  myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
}

矩形をクリックしてください。

仕様

Specification Status Comment
Scalable Vector Graphics (SVG) 2
SVGRectElement の定義
勧告候補 Changed the inheritance from SVGElement to SVGGeometryElement and removed the implemented interfaces SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, and SVGTransformable.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
SVGRectElement の定義
勧告 Initial definition

ブラウザ互換性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (有) 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 (有) 1.0 (1.8) 未サポート (有) 3.0.4

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: piyo-ko
 最終更新者: piyo-ko,