1. svg坐標(biāo)系統(tǒng)

對(duì)于所有元素，SVG使用的坐標(biāo)系統(tǒng)或者說(shuō)網(wǎng)格系統(tǒng)，
和Canvas用的差不多（所有計(jì)算機(jī)繪圖都差不多）。

這種坐標(biāo)系統(tǒng)是：
以頁(yè)面的左上角為(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ū)域，然后居中展示在原來(lái)的svg中。

viewBox = "開(kāi)始x坐標(biāo) 開(kāi)始y坐標(biāo) 截取寬度 截取高度"

例如，我們將上面的圖形，從0,0坐標(biāo)點(diǎn)開(kāi)始，截取寬高為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允許截取比原來(lái)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

通過(guò)給line設(shè)置stroke-dasharray，可以繪制虛線(xiàn)。

<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í)候，以實(shí)線(xiàn)10px，空白10px的間距來(lái)畫(huà)虛線(xiàn)。

下圖是指定，stroke-dasharray: 10 2;的效果。

5. stroke-dashoffset

通過(guò)給line設(shè)置stroke-dashoffset，
可以指定繪制虛線(xiàn)時(shí)的起始位置偏移。

下圖向前偏移了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再開(kāi)始繪制虛線(xiàn)。
可以看到實(shí)線(xiàn)部分，只剩下了1px。

6. 動(dòng)畫(huà)

結(jié)合stroke-dasharray和stroke-dashoffset可以給line增加描線(xiàn)效果的動(dòng)畫(huà)。

<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動(dòng)畫(huà)，動(dòng)態(tài)改變了stroke-dashoffset的值，從100到0，
stroke-dashoffset: 100;時(shí)，剛好紅線(xiàn)處于虛線(xiàn)的空白間隙中，
而隨著stroke-dashoffset減少到0，偏移值越來(lái)越小，前面的實(shí)線(xiàn)部分就慢慢顯現(xiàn)出來(lái)了。

注：
stroke-dasharray: 100;是經(jīng)過(guò)計(jì)算過(guò)的，我們的例子中，線(xiàn)條的長(zhǎng)度剛好是100。

參考

mdn: 坐標(biāo)定位
mdn: stroke-dasharray
mdn: stroke-dashoffset
mdn: viewBox