<u></u>svg的path元素可以用來繪制路徑

（1）HTML

<svg class="test-svg">
    <path
        d="
            M25 25
            C50 25 50 50 100 50
            100 75 125 75 125 135
            75 175 75 150 25 150
            Z
        "/>
</svg>

（2）CSS

.test-svg{
    width:200px;
    height:200px;
    background: gray;
}

.test-svg>path {
    fill:green;
    stroke:red;
    stroke-width: 5px;
}
.test-svg>path:hover{
    fill:orange;
}

（3）JS

document.querySelector('.test-svg>path').addEventListener('click',function(){
    alert();
},false);

注：
（1）M，C為指令字母，大寫表示后面坐標(biāo)為絕對(duì)位置，小寫表示相對(duì)位置。
（2）Mx y表示MoveTo (x,y)
（3）Cx1 y1 x2 y2 x y表示CurveTo(x,y)，控制點(diǎn)為(x1,y1)和(x2,y2)。
（4）省略指令字母表示與前面相同。
（5）Z表示關(guān)閉路徑，首尾相連。
（6）可以為path增加CSS樣式和JS事件，fill表示填充色，stroke表示線條顏色。