SVG 矩形
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>
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
嘗試一下»
對於Opera用戶: 查看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>
<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文件 (右鍵單擊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>
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
嘗試一下»
對於Opera用戶: 查看SVG文件 (右鍵單擊SVG圖形預覽源)。
- CSS opacity 屬性用於定義了元素的透明值(範圍: 0 到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>
<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文件 (右鍵單擊SVG圖形預覽源)。
- rx 和ry 屬性可使矩形產生圓角。