SVG的使用

1.形状

rect矩形的使用

rx,ry是圆角，x,y是距离左上角坐标，width和height是宽高，fill是颜色 stroce是边框，stroke-width是边框大小

    <svg version="1.1" style="height: 300px; width: 500px">
        <rect rx="50" ry="50" y="50" x="40" stroke="black" stroke-width="2" fill="red" width="300" height="100"/>
    </svg>

circle圆的使用

cx,cy是圆心点，r是半径

        <circle cx="100" cy="100" r="40"  fill="red" stroke="black" stroke-width="2"/>

ellipse椭圆的使用

rx,ry是x,y的半径

 <ellipse cx="240" cy="100" rx="220" ry="100" style="fill:purple" />

line线的使用

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

  <line x1="0"  y1="0"  x2="200" y2="30" stroke="black" stroke-width="2"  fill="#000"/>

polygon多边形的使用

points最少为三个的点位

    <polygon points="220,100 300,210 170,250 200,100 " stroke="black" stroke-width="2" fill="#ccc" />

polyline折线的使用

points为点位

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="#fff" stroke="black" stroke-width="2" />