SVG <rect>

SVG 形狀

SVG 有一些預定義的形狀元素可供開發者使用：

• 矩形 <rect>
• 圓形 <circle>
• 橢圓形 <ellipse>
• 直線 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

接下來的章節將從 rect 元素開始講解每個元素。

SVG 矩形 - <rect>

例子 1

<rect> 元素用于創建矩形以及矩形形狀的變體：

這是 SVG 代碼：

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

親自試一試

代碼解釋：

• <rect> 元素的 width 和 height 屬性定義矩形的高度和寬度
• style 屬性用于定義矩形的 CSS 屬性
• CSS fill 屬性定義矩形的填充顏色
• CSS border-width 屬性定義矩形的邊框寬度
• CSS stroke 屬性定義矩形的邊框顏色

例子 2

讓我們看另一個包含新屬性的例子：

這是 SVG 代碼：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

親自試一試

代碼解釋：

• x 屬性定義矩形的左側位置（例如 x="50" 將矩形放置在距左外邊距 50 px 的位置）
• y 屬性定義矩形的頂部位置（例如 y="20" 將矩形放置在距上外邊距 20 px 的位置）
• CSS fill-opacity 屬性定義填充顏色的不透明度（合法范圍：0 到 1）
• CSS border-opacity 屬性定義筆觸顏色的不透明度（合法范圍：0 到 1）

例子 3

定義整個元素的不透明度：

這是 SVG 代碼：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

親自試一試

代碼解釋：

• CSS opacity 屬性定義整個元素的不透明度值（合法范圍：0 到 1）

例子 4

最后一個例子，創建帶圓角的矩形：

這是 SVG 代碼：

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

親自試一試

代碼解釋：

• rx 和 ry 屬性使矩形的角變圓