SVG中的常用标簽

以下六個标簽是最常用的，相對簡單一些的：

1）line ： 直線

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>
      

代碼解釋：

x1 屬性在 x 軸定義線條的開始

y1 屬性在 y 軸定義線條的開始

x2 屬性在 x 軸定義線條的結束

y2 屬性在 y 軸定義線條的結束

2）polyline ： 折線

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>
      

3）rect ： 矩形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>
      

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度

style 屬性用來定義 CSS 屬性

CSS 的 fill 屬性定義矩形的填充顔色（rgb 值、顔色名或者十六進制值）

CSS 的 stroke-width 屬性定義矩形邊框的寬度

CSS 的 stroke 屬性定義矩形邊框的顔色

x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到浏覽器視窗左側的距離是 0px）

y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到浏覽器視窗頂端的距離是 0px）

CSS 的 fill-opacity 屬性定義填充顔色透明度（合法的範圍是：0 - 1）

CSS 的 stroke-opacity 屬性定義筆觸顔色的透明度（合法的範圍是：0 - 1）

CSS 的 opacity 屬性定義整個元素的透明值（合法的範圍是：0 - 1）

rx 和 ry 屬性可使矩形産生圓角。

4）circle ： 圓形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>
      

cx 和 cy 屬性定義圓點的 x 和 y 坐标。如果省略 cx 和 cy，圓的中心會被設定為 (0, 0)

r 屬性定義圓的半徑。

5）ellipse ： 橢圓形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>
      

cx 屬性定義圓點的 x 坐标

cy 屬性定義圓點的 y 坐标

rx 屬性定義水準半徑

ry 屬性定義垂直半徑

6）polygon ： 多邊形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>
      

points 屬性定義多邊形每個角的 x 和 y 坐标

寵辱不驚，看庭前花開花落；去留無意，望天上雲卷雲舒