SVG 矩形
SVG Shapes
SVG有一些預先定義的形狀元素，可被開發者使用和操作：
矩形<rect>
圓形<circle>
橢圓<ellipse>
# #線<line>
折線<polyline>多邊形<polygon>實例1<rect> 標籤可用於建立矩形，以及矩形的變體：
下面是SVG程式碼：
- 實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>
- #執行實例»點擊"運行實例" 按鈕查看線上實例
針對Opera用戶： 查看SVG檔案（右鍵點選SVG圖形預覽來源）。
- 程式碼解析:
rect 元素的width 和height 屬性可定義矩形的高度和寬度
style 屬性用來定義CSS 屬性CSS 的fill 屬性定義矩形的填滿顏色（rgb 值、顏色名稱或十六進位值）#實例2讓我們看看另一個例子，它包含一些新的屬性：
Here is the SVG code:
- 實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
- 運行實例»點擊"運行實例" 按鈕查看線上實例
對於Opera用戶：查看SVG檔案（右鍵點選SVG圖形預覽來源）。
- 程式碼解析：
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器視窗左側的距離是0px）y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器視窗頂端的距離是0px） 實例3######定義整個元素的不透明度：######下面是SVG程式碼：#########實例######
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>#########運行實例»######點擊"運行實例"按鈕查看線上實例##### #
對於Opera用戶：查看SVG檔案（右鍵點選SVG圖形預覽來源）。
CSS opacity 屬性用於定義了元素的透明值 (範圍: 0 到 1)。
實例4
最後一個例子，建立一個圓角矩形：
下面是SVG程式碼：
實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
運行實例»
#點擊"運行實例" 按鈕查看線上實例
對Opera用戶：查看SVG檔案（右鍵點選SVG圖形預覽來源）。
rx 和 ry 屬性可使矩形產生圓角。
