svg矢量圖
canvas：用於繪制位圖
svg：使用xml格式繪制圖形
svg：要有一個根節點，標簽就相當於html
svg 命名空間 xmlns="http://www.w3.org/2000/svg" 版本 version="1.1"
svg如果不設置大小，默認占用位置 300x150
定義矩形：rect標簽，必填的兩個屬性 width height
rect的屬性：
width：寬
height：高
x：x軸坐標；
y：y軸坐標；
rx：邊框圓角；
style="fill;red"：樣式屬性
fill：填充顏色
stroke-width：邊框寬度
stroke：邊框顏色
fill-opacity：填充透明度
stroke-opacity：邊框透明度；
opacity：同時定義填充和邊框的透明度
定義圓：circle標簽
屬性：
cx：定義x軸坐標
cy：定義y軸坐標
r：半徑
style="fill;red"：樣式屬性
fill：填充顏色
stroke-width：邊框寬度
stroke：邊框顏色
fill-opacity：填充透明度
stroke-opacity：邊框透明度；
opacity：同時定義填充和邊框的透明度
定義橢圓：ellipse標簽
屬性：
cx：定義x軸坐標；
cy：定義y軸坐標；
rx：定義x軸半徑；
ry：定義y軸半徑；
style="fill;red"：樣式屬性
fill：填充顏色
stroke-width：邊框寬度
stroke：邊框顏色
fill-opacity：填充透明度
stroke-opacity：邊框透明度；
opacity：同時定義填充和邊框的透明度
繪制直線的標簽：line
屬性：
x1：起始坐標 x 軸
y1：起始坐標 y 軸
x2：結束坐標 x 軸
y2：結束坐標 y 軸
定義多邊形：polygon標簽
屬性：
points：用於定義寫多邊形角的坐標，
案例：points="20,12 50,45 30,60"
fill-rule：奇偶判斷；
折線：polyline標簽：由直線繪制路徑
屬性：
points：同polygon標簽；
路徑：path，分大小寫，大寫代表絕對 ，小寫代表相對；
屬性：
d：多個屬性的集合
M：代表起始點 moveTo
L：代表領點 lineTo
Z：代表 closePath；構成一個閉合回路
案例：d="M100,30 L200,20 Z";
H：代表水平划線（默認與y軸上面的值一致）
v：代表垂直線條（默認與x軸上面的值一致）
A：用於划曲線 x 代表半徑 y 代表半徑 0 代表角度（0代表圓） 弧長（0代表小狐長，1代表大弧長），方向（0代表逆時針，1代表順時針），終點的x坐標，終點的y坐標；
eg：<path d="M30,30 A25,75,90,1,1,80,80 " stroke="red"></path> 橢圓案例
<path d="M30,30 A25,25,0,0,0,80,80" stroke="red"></path> 半圓案例
transform屬性：svg中的一個屬性，translate 代表平移 ，rotate 代表旋轉 ，scale 代表縮放
transform屬性：平移，旋轉都是以起點0，0（svg的左上角）為參考點，而css3中以元素的中心點為參考點；
text標簽：定義文本：x，y的值在字體左上角，text-anchor="middle" 讓字體居中
g標簽：用於相關元素的一個組合；
g身上的屬性，子元素都會被繼承，g上的屬性必須是顯現屬性，不能是svg私有的 ，比如 g 上的圓心坐標不行；
image標簽：繪制圖片
x：x軸坐標
y：y軸坐標
width：寬
height：高
xlink:href="圖片路徑"
use標簽：復制一個
x屬性和y屬性：相對於被克隆的坐標位置 不是相對於svg的0，0點的坐標
xlink:href屬性：復制標簽的錨點；
案例：
<text x="60" y="30" text-anchor="middle" stroke="red" id="a">hello world</text>
<use x="2" y="2" xlink:href="#a"></use>
animate標簽：動畫
attributeName：目標屬性名稱；
from="" to="" : 從哪到哪；
dur：持續時間
repeatCount="indefinite" 動畫的無限次播放
注意事項：寫在需要動畫元素的中間
eg：
<rect x="60" y="50" width="50" height="50" fill="red">
<animate attributeName="width" from="50" to="200" dur="2" repeatCount="indefinite"></animate>
</rect>