<rect>

使用語境

屬性

x

矩形的 x 座標。值型別：<length> | <percentage>；預設值：0；可動畫：是

y

矩形的 y 座標。值型別：<length> | <percentage>；預設值：0；可動畫：是

width

矩形的寬度。值型別：auto | <length> | <percentage>；預設值：auto；可動畫：是

height

矩形的高度。值型別：auto | <length> | <percentage>；預設值：auto；可動畫：是

rx

矩形水平角的半徑。如果指定了 ry，則預設為 ry。值型別：auto | <length> | <percentage>；預設值：auto；可動畫：是

ry

矩形垂直角的半徑。如果指定了 rx，則預設為 rx。值型別：auto | <length> | <percentage>；預設值：auto；可動畫：是

路徑長度

矩形周長的總長度，以使用者單位表示。值型別：<number>；預設值：無；可動畫：是

DOM 介面

此元素實現了 SVGRectElement 介面。

示例

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Regular rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

規範

瀏覽器相容性

另見

• SVG 演示屬性，包括 fill 和 stroke
• 其他基本的 SVG 形狀：<circle>、<ellipse>、<line>、<polygon>、<polyline>