SVG圖形
SVG有開發者可以使用一些預定義的形狀元素：
- 矩形<rect>
- 圓<circle>
- 橢圓<ellipse>
- 行<line>
- 折線<polyline>
- 多邊形<polygon>
- 路徑<path>
下面的章節會解釋每個元素，首先從矩形元素。
SVG矩形- <rect>
例1
所述<rect>元素用於創建一個矩形和一個矩形形狀的變體：
下面是SVG代碼：
例
<svg width="400" height="110">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
試一試» Code explanation:
- 的寬度和高度屬性<rect>元件限定的高度和矩形的寬度
- 該style屬性，用於為矩形定義的CSS屬性
- 該CSS填充屬性定義矩形的填充顏色
- CSS的筆劃寬度屬性定義矩形邊框的寬度
- CSS的行程屬性定義矩形邊框的顏色
例2
讓我們來看看它包含一些新的屬性另一個例子：
下面是SVG代碼：
例
<svg width="400" height="180">
<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>
試一試» Code explanation:
- 該x屬性定義矩形的左側位置（例如：X =“50”從左邊距放置的矩形50像素）
- 該y屬性定義矩形的頂部位置（如Y =“20”從上邊距放置的矩形20像素）
- CSS的填充不透明度屬性定義填充顏色的透明度(legal range: 0 to 1)
- CSS的行程不透明屬性定義筆觸顏色的透明度(legal range: 0 to 1)
例3
定義為整個元件的不透明度：
下面是SVG代碼：
例
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
試一試» Code explanation:
- 該CSS opacity屬性定義整個元素的不透明度值(legal range: 0 to 1)
例4
最後一個例子，創建一個圓角矩形：
下面是SVG代碼：
例
<svg width="400" height="180">
<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>
試一試» Code explanation:
- 在RX和ry屬性舍入矩形的角