[HTML] svg>path

<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为指令字母，大写表示后面坐标为绝对位置，小写表示相对位置。
（2）Mx y表示MoveTo (x,y)
（3）Cx1 y1 x2 y2 x y表示CurveTo(x,y)，控制点为(x1,y1)和(x2,y2)。
（4）省略指令字母表示与前面相同。
（5）Z表示关闭路径，首尾相连。
（6）可以为path增加CSS样式和JS事件，fill表示填充色，stroke表示线条颜色。