SVG基本圖形元素

svg中預定義了7中形狀元素，分別是矩形(rect)、圓形(circle)、橢圓(ellipse)、
線段(line)、折線(polyline)、多邊形(polygon)、路徑(path)。

1.矩形

<svg width="500" height="300" version="1.1">  //定義svg畫布的寬度和高度
    <rect x="20" y="20" width="200" height="100" style="fill:steelblue;stroke:blue;stroke-width:4;opactity:0.5"/> 
</svg>
x:矩形左上角的x坐標
y:矩形左上角的y坐標
width:矩形的寬度
height:矩形的高度

圖形如下所示

2.圓角矩形

<svg width="500" height="300" version="1.1">
    <rect x="20" y="20" rx="30" ry="50" width="200" height="100" style="fill:red;stroke:black;stroke-width:3;opacity: 0.5;">
</svg>
x:矩形左上角的x坐標
y:矩形左上角的y坐標
width:矩形的寬度
height:矩形的高度
rx:對於圓角矩形,圓角對應的橢圓在x方向上的半徑
ry:對於圓角矩形,圓角對應的橢圓在y方向上的半徑

圖形如下所示

 

3.圓形

<svg width="500" height="300" version="1.1">
    <circle cx="150" cy="150" r="80" style="fill:yellow;stroke:black;stroke-width:2"/>
</svg>
cx:圓心的x坐標
cy:圓心的y坐標
r:圓的半徑

圖形如下：

 

4.橢圓

<svg width="500" height="300" version="1.1">
    <ellipse cx="250" cy="150" rx="200" ry="100" style="fill:green;stroke:blue;stroke-width:1"/>
</svg>
cx:橢圓圓心的x坐標
cy:橢圓圓心的y坐標
rx:橢圓的x軸半徑
ry:橢圓的y軸半徑

圖形如下所示：

 

5.線段

<svg width="500" height="300" version="1.1">
    <line x1="20" y1="10" x2="200" y2="230" style="stroke:red;stroke-width:3"/>
</svg>
x1:起點的x坐標
y1:起點的y坐標
x2:終點的x坐標
y2:重點的y坐標

圖形如下所示

 

6.多邊形

<svg width="500" height="300" version="1.1">
    <polygon points="100,30, 20,80 60,160 140,160 180,90" style="fill:LawnGreen;stroke:black;stroke-width:1" />
</svg>
points:多邊形各個點的坐標

圖形如下：

7.折線

<svg width="500" height="300" version="1.1">
    <polyline points="100,30, 20,80 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:1" transform="translate(200,0)" />
</svg>
points:折線各個點坐標

圖形如下:

8.路徑
直線類

<svg width="500" height="300" version="1.1">
    <path d="M30,50 L200,200" style="stroke:black;stroke-width:1"/>
    <path d="M30,50 H200" style="stroke:red;stroke-width:1"/>
    <path d="M30,50 V200" style="stroke:blue;stroke-width:1"/>
</svg>
M:起點坐標
L:畫直線到指定坐標
H:畫水平直線到指定坐標,省略了y軸坐標
V:畫垂直直線到指定坐標,省略了x軸坐標

圖形如下

曲線類

<svg width="500" height="300" version="1.1">
    <path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:white;stroke:red;stroke-width:2"/>
</svg>
C:三次貝賽爾曲線經兩個指定控制點和到達終點坐標
S:與前一條貝塞爾曲線相連,第一個控制點為前一條曲線第二個控制點的對稱點,只需要第二個控制點和終點

圖形如下

弧線類

<svg width="500" height="300" version="1.1">
    <path d="M100,200 A50,30 0 1,0 150,-150 " style="fill:red;stroke:blue;stroke-width:1"/>
</svg>
A(rx,ry,x-axis-ratation,large-arc-flag,sweep-flag,x,y)
rx:橢圓x方向的半軸大小
ry:橢圓y方向的半軸大小
x-axis-ratation:橢圓的x軸與水平軸順時針方向夾角
large-arc-flag:兩個值(1:大角度弧線 0:小角度弧線)
sweep-flag:兩個值(1:順時針至終點 0:逆時針至終點)
x:終點x坐標
y:終點y坐標

圖形如下：