概要
rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。
使用可能な場所
| カテゴリ | 基本シェイプ要素 、 グラフィックス要素 、 図形要素 |
|---|---|
| 許可された内容 | 任意の数、任意の順で以下の要素を配置可能： アニメーション要素 説明的要素 |
例
シンプルな rect 要素の使い方
| ソースコード | 出力結果 |
|---|---|
<?xml version="1.0"?>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100"/>
</svg> |
角の丸い rect 要素
| ソースコード | 出力結果 |
|---|---|
<?xml version="1.0"?>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10"
width="100" height="100"
rx="15" ry="15"/>
</svg> |
属性
グローバル属性
専用属性
DOM インターフェイス
この要素は SVGRectElement インターフェイスを提供します。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 3.0 | 1.0 (1.8) | 未サポート | (有) | 3.0.4 |
Compatibility sources に基づく。