SVG <rect> · W3School Xml 教程

# SVG <rect> ## SVG Shapes SVG有一些預定義的形狀元素，可被開發者使用和操作： * 矩形 <rect> * 圓形 <circle> * 橢圓 <ellipse> * 線 <line> * 折線 <polyline> * 多邊形 <polygon> * 路徑 <path> 下面的章節會為您講解這些元素，首先從矩形元素開始。 ## SVG 矩形 - <rect> ## 實例 1 <rect> 標簽可用來創建矩形，以及矩形的變種：下面是SVG代碼： ## 實例 ``` <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> ``` 對于Opera用戶： [查看SVG文件](images/rect1.svg)（右鍵單擊SVG圖形預覽源）。 **代碼解析:** * rect 元素的 width 和 height 屬性可定義矩形的高度和寬度 * style 屬性用來定義 CSS 屬性 * CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值） * CSS 的 stroke-width 屬性定義矩形邊框的寬度 * CSS 的 stroke 屬性定義矩形邊框的顏色 ## 實例 2 讓我們看看另一個例子，它包含一些新的屬性： Here is the SVG code: ## 實例 ``` <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> ``` 對于Opera用戶：[查看SVG文件](images/rect2.svg)（右鍵單擊SVG圖形預覽源）。 **代碼解析：** * x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px） * y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px） * CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1） * CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1） ## 實例 3 定義整個元素的不透明度：下面是SVG代碼： ## 實例 ``` <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> ``` 對于Opera用戶：[查看SVG文件](images/rect2.svg)（右鍵單擊SVG圖形預覽源）。 * The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1) ## 實例 4 最后一個例子，創建一個圓角矩形：下面是SVG代碼： ## 實例 ``` <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> ``` 對于Opera用戶：[查看SVG文件](images/rect2.svg)（右鍵單擊SVG圖形預覽源）。 * rx 和 ry 屬性可使矩形產生圓角。