svg

svg用於繪製矢量圖

　　若是繪製的時候不設置大小，默認佔用面積爲300*150。

定義矩形 rect

定義圓 circle   　　　　 cx、cy 定義圓心座標 ，r定義半徑

定義橢圓 ellipse　　　　cx，cy定義圓心座標 ，rx定義x軸半徑　　ry定義y軸半徑

直線 line 　　　　　　x一、x2定義起始點座標     x2，y2定義結束點座標    必須結合stroke繪製

多邊形  polygon points=" "  寫多邊形角的座標

定義折線 polyline points=" "  寫折點座標

定義路徑 path d="M"   M是起點座標L是相鄰點座標  Z讓路徑構成閉合迴路  H表明水平的線條  默認x軸上的值同樣  V表明垂直線條

 

svg中fill-opacity 和 opacity屬性的區別:fill-opacity填充色透明度 顧名思義  只改變填充的透明度 不包含邊框等，而opacity是改變全體的透明度。

svg過渡動畫

　　

transform 轉換 svg中的一個屬性 translate rotate scale

平移 旋轉都是以起點0 0 點爲參考點 而css3中以元素的中心點爲參考點

g用於將相關元素進行組合

g身上的屬性 子元素都會繼承 可是g上的屬性都必須是顯現元素 不是svg元素私有的 好比g上的圓心座標不行

text 用於定義文本 x y 的值在字體的左下角

text-anchor:middle; 讓字體居中

image 繪製圖片

x 圖像左上角x軸座標

y 圖像左上角y軸的座標

width 圖像的寬度

height： 圖像的高度

xlink-href 圖像的路徑   *必須

use用於複製元素 x y

x y是相對於原始的元素的座標位置 不是先對svg的00點座標

animate

寫在須要動畫元素的中間

attrbuteName form to dur repeatCount="indefinite"(無限次)