Home » SVG 入門教學

[SVG]SVG 基本圖形 - 矩形 rect

要使用 SVG 來產生一個矩形是一件很簡單的事,只要使用 <rect> 標籤就可以囉。

先來看個基本的矩形寫法:

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<rect width="200" height="100" />
</svg>

rect 的就先當它是 div 吧,預覽後的效果就是

svg-shape-rect-1

當然也能利用 css 或是 style 屬性來進行各種樣式設定:

1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<rect x="10" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;" />
 
	<rect x="130" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;fill-opacity:.5;" />
 
	<rect x="250" y="10" width="100" height="100" style="fill:steelblue;stroke:red;stroke-width:10;opacity:.5;" />
</svg>

在 SVG 中,座標都是絕對座標,所以只要直接使用 xy 屬性就能自訂位置了。接著樣式的部份,也能像是 css 一樣來自訂背景顏色或是邊框顏色:

svg-shape-rect-2

筆者將 rect 的屬性整理成一個簡單的表格:

rect 屬性

屬性名稱 屬性說明
x 起始點 x 軸的座標
y 起始點 y 軸的座標
width 矩形的寬度
height 矩形的高度
rx 圓角的 x 軸半徑,類似 css 中的 border-radius
ry 圓角的 y 軸半徑,類似 css 中的 border-radius
transform 矩形的變形效果,類似 css 中的 transform

而 style 的部份可以參考以下的表格:

stlye 屬性

屬性名稱 屬性說明
fill 圖形內部的填滿顏色,類似 css 中的 background-color
fill-opacity 圖形內部的不透明度值,類似 css 中的 opacity,但不包含邊框喔!
stroke 圖形的邊框顏色,類似 css 中的 border-color
stroke-width 圖形的邊框寬度,類似 css 中的 border-width
opacity 圖形的不透明度值,類似 css 中的 opacity

其中要仔細比較 opacotyfill-opacity 的差異喔!

[ 標籤: ]

發表迴響