svg常用

创建

<svg width="100%" height="100%" version='1.1' viewBox='0 0 100 100'
xmlns="http://www.w3.org/2000/svg">
<rect width='100' height='100' fill='red'/>     //插入形状
</svg>
width:svg宽度
height:svg高度
viewBox:图像绘制区域

自定义形状

通用参数

fill:填充颜色
stroke:轮廓颜色
stroke-wdith:边框宽度
stroke-dasharray:边框变为虚线并可设置虚线每段长度
stroke-dashoffset:虚线偏移量

矩形

<rect width='100' height='100' fill='red' stroke-width='10' stroke='#444' />
width:宽度
height:高度

圆形

<cricle cx='10' cy='20' r='10' stroke='black' stroke-width='3'/>
cx,cy:圆点坐标，默认为(0,0);
r:圆半径

椭圆

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
cx,cy:圆点坐标,
rx:水平半径
ry:垂直半径

线条

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
x1,y1:线条起点坐标
x2,y2:线条终点坐标

多边形

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000;stroke-width:1"/>
points:多边形每个角的坐标

折线

<polyline points="0,0 0,20 20,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
points:折角坐标