SVG基礎(chǔ)總結(jié)
來源：SegmentFault 思否
作者：nicezhu
最近在工作中做一個(gè)h5相關(guān)的半圓進(jìn)度組件需求，便開始學(xué)習(xí)了下svg。
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言，SVG指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG基本屬性
SVG的坐標(biāo)系統(tǒng)
在介紹其它屬性時(shí)，必須先介紹svg的坐標(biāo)系統(tǒng)，和我們高中學(xué)的坐標(biāo)系有點(diǎn)不同，也可以說是第一象限按x軸翻轉(zhuǎn)得到svg的坐標(biāo)系。y軸右方x為正值，x軸下方y(tǒng)為正值。
SVG 值的單位
在svg中默認(rèn)的單位為px，可以寫單位，也可以不寫單位。
svg視窗大小大小
每次你創(chuàng)建了一個(gè)新的SVG元素，你也就創(chuàng)建了一個(gè)新的SVG視窗。視窗的大小等于你為SVG元素設(shè)置的寬度和高度。
svg在絕大多數(shù)瀏覽器中，默認(rèn)大小為長300px，寬150px的大小，實(shí)際應(yīng)用中推薦制定svg的width和height值。
<svg width="100" height="100">svg>
SVG 畫布
畫布是無限大的，意味著你可以在畫布上畫無限大的內(nèi)容，但是，當(dāng)你畫的內(nèi)容超過svg視窗大小的時(shí)候你是看不到的，但畫布的內(nèi)容是存在的，好比css中的overflow:hidden屬性只是遮擋了可視區(qū)域的內(nèi)容。
從一個(gè)簡單的例子看下。
<svg><circle cx="0" cy="0" r="50" fill="green" />svg>
我們畫了一個(gè)圓，但是在svg視窗里并未顯示全部的圓，那是因?yàn)閳A的中心默認(rèn)是坐標(biāo)系的（0，0）位置。
當(dāng)我們對svg設(shè)置overflow: visible;時(shí)便顯示了完整的圓。
設(shè)置圓的中心，讓其顯示在svg視窗中
<circle cx="50" cy="50" r="50" fill="green" />
svg預(yù)定義的形狀
矩形 圓形 橢圓 線 折線 多邊形 路徑
SVG Stroke相關(guān)
SVG提供了一個(gè)范圍廣泛stroke 屬性。
stroke stroke-width stroke-linecap stroke-dasharray stroke-dashoffset
這些屬性很常用，尤其是stroke-dasharray和stroke-dashoffset組合我們可以實(shí)現(xiàn)很多生動的進(jìn)度效果。
stroke 屬性
Stroke屬性定義一條線，文本或元素輪廓顏色：
stroke-width 屬性
stroke- width屬性定義了一條線，文本或元素輪廓厚度：
stroke-linecap 屬性
strokelinecap屬性定義不同類型的開放路徑的終結(jié)：
<svg><g fill="none" stroke="black" stroke-width="6"><path stroke-linecap="butt" d="M5 20 l215 0" /><path stroke-linecap="round" d="M5 40 l215 0" /><path stroke-linecap="square" d="M5 60 l215 0" />g>svg>
strokedasharray屬性用于創(chuàng)建虛線。
stroke-dasharray為一個(gè)參數(shù)時(shí)：其實(shí)是表示虛線長度和每段虛線之間的間距
兩個(gè)參數(shù)或者多個(gè)參數(shù)時(shí)：一個(gè)表示長度，一個(gè)表示間距
<svg><g fill="none" stroke="black" stroke-width="4"><path stroke-dasharray="5,5" d="M5 20 l215 0" /><path stroke-dasharray="10,10" d="M5 40 l215 0" /><path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />g>svg>
stroke-dashoffset 屬性
這個(gè)屬性是相對于起始點(diǎn)的偏移，正數(shù)偏移x值的時(shí)候，相當(dāng)于往左移動了x個(gè)長度單位，負(fù)數(shù)偏移x的時(shí)候，相當(dāng)于往右移動了x個(gè)長度單位。
<svg><line x1="0" y1="10" x2="100" y2="10" stroke="red" stroke-width="5" /><linex1="0"y1="10"x2="100"y2="10"class="line1"stroke-dasharray="70"stroke-dashoffset="0"/>svg>
