1. svg坐標(biāo)系統(tǒng)
對于所有元素洪添，SVG使用的坐標(biāo)系統(tǒng)或者說網(wǎng)格系統(tǒng)候醒，
和Canvas用的差不多（所有計(jì)算機(jī)繪圖都差不多）。
這種坐標(biāo)系統(tǒng)是：
以頁面的左上角為(0,0)坐標(biāo)點(diǎn)，坐標(biāo)以像素為單位多搀，
x軸正方向是向右袜啃，y軸正方向是向下。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>
<style>
svg{
background: #ccc;
}
</style>
我們使用div+css可以實(shí)現(xiàn)相似的效果，
<div>
<span></span>
</div>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
position: relative;
}
div span {
left: 20px;
top: 10px;
width: 70px;
height: 50px;
position: absolute;
background: #999;
}
</style>
2. viewBox
svg的viewBox屬性，
可以截取svg中的一塊矩形區(qū)域，然后居中展示在原來的svg中年叮。
viewBox = "開始x坐標(biāo) 開始y坐標(biāo) 截取寬度 截取高度"
例如，我們將上面的圖形玻募，從0,0坐標(biāo)點(diǎn)開始只损，截取寬高為50,50的一塊區(qū)域。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>
<style>
svg{
background: #ccc;
}
</style>
viewBox允許截取比原來svg區(qū)域更大的范圍补箍，
這樣可以實(shí)現(xiàn)縮小原svg內(nèi)圖形的效果改执。
例如，我們截取寬高為200,200的一塊矩形區(qū)域坑雅。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>
<style>
svg{
background: #ccc;
}
</style>
3. line
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="70" y2="90" />
</svg>
<style>
svg{
background: #ccc;
}
svg line{
stroke: #999;
stroke-width: 4;
fill: none;
}
</style>
其中辈挂，x1,y1表示初始坐標(biāo)，x2,y2表示終止坐標(biāo)裹粤。
4. stroke-dasharray
通過給line設(shè)置stroke-dasharray终蒂，可以繪制虛線。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="70" y2="90" />
</svg>
<style>
svg {
background: #ccc;
}
svg line {
stroke: #999;
stroke-width: 4;
fill: none;
stroke-dasharray: 10;
}
</style>
其中遥诉，stroke-dasharray: 10;相當(dāng)于stroke-dasharray: 10 10;拇泣，
表示繪制line的時候，以實(shí)線10px矮锈，空白10px的間距來畫虛線霉翔。
下圖是指定，stroke-dasharray: 10 2;的效果苞笨。
5. stroke-dashoffset
通過給line設(shè)置stroke-dashoffset债朵，
可以指定繪制虛線時的起始位置偏移。
下圖向前偏移了9px瀑凝，
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="70" y2="90" />
</svg>
<style>
svg {
background: #ccc;
}
svg line {
stroke: #999;
stroke-width: 4;
fill: none;
stroke-dasharray: 10 2;
stroke-dashoffset: 9;
}
</style>
以上代碼指定了stroke-dashoffset: 9;序芦，則向前偏移9px再開始繪制虛線。
可以看到實(shí)線部分粤咪，只剩下了1px谚中。
6. 動畫
結(jié)合stroke-dasharray和stroke-dashoffset可以給line增加描線效果的動畫。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="70" y2="90" />
<line x1="10" y1="10" x2="70" y2="90" />
</svg>
<style>
svg {
background: #ccc;
}
svg line {
stroke: #999;
stroke-width: 4;
fill: none;
stroke-dasharray: 100;
}
svg line:fisrt-child{
stroke-dashoffset: 0;
}
@keyframes depict {
from {
stroke: red;
stroke-dashoffset: 100;
}
to {
stroke: red;
stroke-dashoffset: 0;
}
}
svg line:last-child{
stroke-dasharray: 100;
animation: depict 2s linear 0s 1 normal forwards;
}
</style>
我們使用了css動畫，動態(tài)改變了stroke-dashoffset的值宪塔，從100到0磁奖，
stroke-dashoffset: 100;時，剛好紅線處于虛線的空白間隙中蝌麸，
而隨著stroke-dashoffset減少到0点寥，偏移值越來越小艾疟，前面的實(shí)線部分就慢慢顯現(xiàn)出來了来吩。
注：
stroke-dasharray: 100;是經(jīng)過計(jì)算過的，我們的例子中蔽莱，線條的長度剛好是100弟疆。
參考
mdn: 坐標(biāo)定位
mdn: stroke-dasharray
mdn: stroke-dashoffset
mdn: viewBox
