SVG <rect>
SVG 形狀
SVG 包含一些預定義形狀元素，開發者可使用這些元素。
- 矩形
<rect> - 圓形
<circle> - 橢圓形
<ellipse> - 線條
<line> - 折線
<polyline> - 多邊形
<polygon> - 路徑
<path>
接下來的章節將解釋每個元素，從 <rect> 元素開始。
SVG 矩形 - <rect>
<rect> 元素用於建立矩形和矩形的變體形狀。
<rect> 元素有六個基本屬性，用於定位和塑造矩形。
| Attribute | 描述 |
|---|---|
| width | 必需。矩形的寬度。 |
| height | 必需。矩形的高度。 |
| x | 矩形左上角的 x 座標。 |
| y | 矩形左上角的 y 座標。 |
| rx | 矩形角的 x 座標半徑（用於圓角）。預設為 0。 |
| ry | 矩形角的 y 座標半徑（用於圓角）。預設為 0。 |
一個 SVG 矩形
此示例使用六個基本屬性和填充顏色建立一個矩形。
這是 SVG 程式碼
示例
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>
自己動手試一試 »
程式碼解釋
<rect>元素的width和height屬性定義了矩形的高度和寬度。x和y屬性定義了矩形左上角在 SVG 畫布上的 x 和 y 座標（x="10" 表示矩形距離左邊距 10px，y="10" 表示矩形距離頂部邊距 10px）。rx和ry屬性定義了矩形角的半徑。fill屬性定義了矩形的填充顏色。
帶邊框的矩形
讓我們來看另一個包含一些新屬性的示例。
這是 SVG 程式碼
示例
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>
自己動手試一試 »
程式碼解釋
style屬性用於定義矩形的 CSS 屬性。- CSS
fill屬性定義了矩形的填充顏色。 - CSS
stroke-width屬性定義了矩形邊框的寬度。 - CSS
stroke屬性定義了矩形邊框的顏色。
帶透明度的矩形
讓我們來看另一個包含一些新屬性的示例。
這是 SVG 程式碼
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
自己動手試一試 »
程式碼解釋
- CSS
fill-opacity屬性定義了填充顏色的透明度（有效範圍：0 到 1）。 - CSS
stroke-opacity屬性定義了描邊顏色的透明度（有效範圍：0 到 1）。
另一個帶透明度的矩形
為整個元素定義透明度。
這是 SVG 程式碼
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
自己動手試一試 »
程式碼解釋
- CSS
opacity屬性定義了整個元素的透明度值（有效範圍：0 到 1）。
帶圓角的矩形
最後一個示例，建立一個帶圓角的矩形。
這是 SVG 程式碼
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10" rx="20" ry="20"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
自己動手試一試 »
程式碼解釋
rx和ry屬性使矩形角圓化。
