<rect>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
<rect>
要素は SVG の基本図形であり、位置・幅・高さで定義される長方形を描画します。長方形は角を丸めることができます。
例
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
属性
x
-
長方形の x 座標です。 値の型: <length>|<percentage> ; 既定値:
0
; アニメーション: 可 y
-
長方形の y 座標です。 値の型: <length>|<percentage> ; 既定値:
0
; アニメーション: 可 width
-
長方形の幅です。 値の型:
auto
|<length>|<percentage> ; 既定値:auto
; アニメーション: 可 height
-
長方形の高さです。 値の型:
auto
|<length>|<percentage> ; 既定値:auto
; アニメーション: 可 rx
-
長方形の角の水平方向の半径。
ry
が指定されていた場合は、それが既定値です。 値の型:auto
|<length>|<percentage> ; 既定値:auto
; アニメーション: 可 ry
-
長方形の角の垂直方向の半径。
rx
が指定されていた場合は、それが既定値です。 値の型:auto
|<length>|<percentage> ; 既定値:auto
; アニメーション: 可 pathLength
-
長方形の周囲の長さの合計をユーザー単位で指定します。 値の型: <number> ; 既定値: none; アニメーション: 可
メモ: SVG2 以降、x
, y
, width
, height
, rx
, ry
は幾何プロパティであり、これらの属性はその要素の CSS プロパティとしても使用することができるということを意味しています。
使用可能な場所
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RectElement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- SVG プレゼンテーション属性、
fill
やstroke
など - その他の SVG 基本図形:
<circle>
,<ellipse>
,<line>
,<polygon>
,<polyline>