1.瞭解SVG:
Scalable Vector Graphics (SVG) 可擴展矢量繪圖，是一種用來描述二維矢量圖形的XML標記語言。
2.特性:
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
- SVG圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
- SVG 可以與 Java 技術一起運行 SVG 是開放的標準
- SVG 文件是純粹的 XML
- SVG 的主要競爭者是 Flash。 與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和DOM）相兼容。而 Flash 則是未開源的私有技術。
3.SVG的基本形狀有以下:
- 矩形 rect
- 圓形 circle
- 橢圓 ellipse
- 線 line
- 折線 polyline
- 多邊形 polygon
- 路徑 path
4.實戰舉例:
//繪製一個圓
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
//cx:X軸
//cy:Y軸
//r:半徑
//stroke:線條顏色
//stroke-width:線條寬度
//fill:填充色
綜合舉例:
<svg width="200" height="250">
//矩形
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="1"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="1"/>
//圓形
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="1"/>
//橢圓
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="1"/>
//線條
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
//折線
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
//多邊形
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
//路徑
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
以上代碼在網頁中的現實如下圖:
各個參數的解釋:
1.矩形 - rect元素
這個元素有6個控制位置和形狀的屬性，分別是：
x：矩形左上角的座標(用戶座標系)的x值。
y：矩形左上角的座標(用戶座標系)的y值。
width：矩形寬度。
height：矩形高度。
rx：實現圓角效果時，圓角沿x軸的半徑。
ry：實現圓角效果時，圓角沿y軸的半徑。
比如上面例子中，實現了圓角效果，你也可以通過設置rx,ry爲不同的值實現橢圓角效果
2.橢圓 - ellipse元素
這個是更加通用的圓形元素，你可以分別控制半長軸和半短軸的長度，來實現不同的橢圓，很容易想到，當兩個半軸相等時，就是正圓形了。
rx：半長軸(x半徑)。
ry：半短軸(y半徑)。
cx：圓心座標x值。
cy：圓心座標y值。
3.直線 - line元素
直線需要定義起點與終點即可：
x1：起點x座標。
y1：起點y座標。
x2：終點x座標。
y2：終點y座標。
4.折線 - polyline元素
折線主要是要定義每條線段的端點即可，所以只需要一個點的集合作爲參數：
points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成：“0 0, 1 1, 2 2”。
5.多邊形 - polygon元素
這個元素就是比polyline元素多做一步，把最後一個點和第一個點連起來，形成閉合圖形。參數是一樣的。
points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成：“0 0, 1 1, 2 2”。
6.路徑 - path元素
這個是最通用，最強力的元素了；使用這個元素你可以實現任何其他的圖形，不僅包括上面這些基本形狀，也可以實現像貝塞爾曲線那樣的複雜形狀；此外，使用path可以實現平滑的過渡線段，雖然也可以使用polyline來實現這種效果，但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數：
d：一系列繪製指令和繪製參數(點)組合成。
繪製指令分爲絕對座標指令和相對座標指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，座標也是絕對座標；相對指令使用對應的小寫字母，點的座標表示的都是偏移量。
絕對座標繪製指令
這組指令的參數代表的是絕對座標。假設當前畫筆所在的位置爲(x0,y0)，則下面的絕對座標指令代表的含義如下所示：
| 指令 | 參數 | 說明 |
|---|---|---|
| M | x y | 將畫筆移動到(x,y) |
| L | x y | 畫筆從當前點移動到(x,y) |
| H | x | 畫筆從當前的點繪製水平線段到點(x,y0) |
| V | y | 畫筆從當前的點繪製豎直線段到點(x0,y) |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 畫筆從當前的點繪製一段圓弧到點(x,y)) |
| C | x1 y1, x2 y2, x y | 畫筆從當前的點繪製一段三次貝塞爾曲線到點(x,y) |
| S | x2 y2, x y | 特殊版本的三次貝塞爾曲線(省略第一個控制點) |
| Q | x1 y1, x y | 繪製二次貝塞爾曲線到點(x,y) |
| T | x y | 特殊版本的二次貝塞爾曲線(省略控制點) |
| Z | 無參數 | 繪製閉合圖形，如果d屬性不指定Z命令，則繪製線段，而不是封閉圖形。 |
7.繪製圓弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圓弧連接2個點比較複雜，情況也很多，所以這個命令有7個參數，分別控制曲線的的各個屬性。下面解釋一下數值的含義：
rx,ry 是弧的半長軸、半短軸長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時針旋轉角度，負數代表順時針轉動的角度。
large-arc-flag 爲1 表示大角度弧線，0 代表小角度弧線。
sweep-flag 爲1代表從起點到終點弧線繞中心順時針方向，0 代表逆時針方向。
x,y 是弧終端座標。
下面就說說中間的3個參數：
x-axis-rotation代表旋轉的角度，下面例子中圓弧的不同：
<svg width="320px" height="320px">
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
效果如圖:
注意:
因爲旋轉的角度不同所以看上去是不同的圖,但是本質病沒有改變
8.擴展
繪製三次貝塞爾爾曲線:
三次貝塞爾曲線有兩個控制點，就是(x1,y1)和(x2,y2)，最後面(x,y)代表曲線的終點。eg：
<svg width="190px" height="160px">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>
如下圖:
