path元素用來定義形狀的通用元素。
下面的命令可用於路徑資料：
注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
例如：畫個圓環
symbol元素用來定義乙個圖形模板物件，它可以用乙個元素例項化。symbol元素對圖形的作用是在同一文件中多次使用，新增結構和語義。結構豐富的文件可以更生動地呈現出來，類似講演稿或盲文，從而提公升了可訪問性。注意，乙個symbol元素本身是不呈現的。只有symbol元素的例項（亦即，乙個引用了symbol的元素）才能呈現。
use元素在svg文件內取得目標節點，並在別的地方複製它們。它的效果等同於這些節點被深轉殖到乙個不可見的dom中，然後將其貼上到use元素的位置，很像html5中的轉殖模板元素。因為轉殖的節點是不可見的，所以當使用css樣式化乙個use元素以及它的隱藏的後代元素的時候，必須小心注意。隱藏的、轉殖的dom不能保證繼承css屬性，除非你明文設定使用[css繼承]
(一般情況下symbol 和use配合著使用的。
例如： 效果中的小人，如果自己畫的話，就非常耗時間，可以在iconfont 裡找乙個，然後引入進來；
在自己的svg 裡引入
line元素是乙個svg基本形狀，用來建立一條連線兩個點的線。
text元素定義了乙個由文字組成的圖形。
例如：
男：45%
lineargradient元素用來定義線性漸變，用於圖形元素的填充或描邊。
例如：
viewbox屬性允許指定乙個給定的一**形伸展以適應特定的容器元素。
viewbox屬性的值是乙個包含4個引數的列表 min-x, min-y, width and height， 以空格或者逗號分隔開。
stroke-dasharray 屬性可控制用來描邊的點劃線的圖案正規化,作為乙個外觀屬性，它也可以直接用作乙個css樣式表內部的屬性,用於建立虛線，之所以後面跟的是array的，是因為值其實是陣列。
例如：
stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'
stroke-dasharray為乙個引數時： 其實是表示虛線長度和每段虛線之間的間距
如：stroke-dasharray = '10' 表示：虛線長10，間距10，然後重複 虛線長10，間距10
offset：偏移的意思,這個屬性是相對於起始點的偏移，正數偏移x值的時候，相當於往左移動了x個長度單位，負數偏移x的時候，相當於往右移動了x個長度單位。
需要注意的是，不管偏移的方向是哪邊，要記得dasharray 是迴圈的，也就是 虛線-間隔-虛線-間隔。
這個屬性要搭配stroke-dashoffset才能看得出來效果，非虛線的話，是無法看出偏移的。
$\color$
半弧度進度條是最難的，可使用stroke-dasharray配合stroke-dashoffset 來畫。
進度紅色部分ac為實線弧度，灰色部分bc為虛線弧度，空白部分ab弧度為間隔
SVG環形進度條
svg scalabe vetor graphics 可縮放向量圖作技術，發源自xml家族。其優秀方便的圖形表現形式，讓其被當下各大瀏覽器所支援。由於其中可內嵌於html，表現出像dom自身元素一樣的性質，而被廣泛的用於html中的圖形表現。今天我作為乙個小白，根據最近的專案經驗和大家分享乙個用sv...
基於svg的環形進度條
其實需求是這麼乙個基於日期的環形進度條，開始用css3寫了一下感覺太麻煩了，於是抽了點時間用svg畫了乙個。不多說 上 css html 70js 獲取當前時間設定為開始時間，年月日 var startdate new date startyear 2016,startmonth 1,startda...
js初級應用之svg實現環形進度條
整理乙個svg繪製環形進度條的demo，需要的同學拿去用即可 在html頁面的任何位置，新增svg繪圖面板。定義svg繪圖區域大小 cx 和 cy 屬性定義圓點的 x 和 y 座標，單位省略為px，如果省略 cx 和 cy，圓的中心會被設定為 0,0 r 屬性定義圓的半徑，stroke定義描邊的顏色...