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

* Some parts of this feature may have varying levels of support.

<rect> 要素は SVG の基本図形であり、位置・幅・高さで定義される長方形を描画します。長方形は角を丸めることができます。

html
<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rect
fill
context-fill value
height
rx
ry
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報