svg基本图形使用文档

基本属性(所有图形都有)

fill: 填充颜色
stroke: 描边颜色
stroke-width: 描边宽度
transform: 变形，可参考http://www.w3.org/TR/SVG/coords.html#TransformAttribute

矩形rect

属性：
x, y: 矩形左上角坐标
width, height: 矩形宽, 高
rx, ry: 矩形圆角大小

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <rect x="10" y="10" width="100" height="100" rx="20" ry="20" fill="#bce8f1"></rect>
</svg>

圆形circle

属性：
cx, cy: 圆心坐标
r: 半径

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <circle cx="60" cy="60" r="50" fill="#bce8f1"></circle>
</svg>

椭圆ellipse

属性：
cx, cy: 椭圆圆心坐标
rx, ry: 椭圆x轴, y轴半径

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <ellipse cx="60" cy="60" rx="50" ry="30" fill="#bce8f1" transform="rotate(30 60 60)"></ellipse>
</svg>

直线line

属性：
x1, y1: 起点坐标
x2, y2: 终点坐标

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <line x1="10" y1="10" x2="110" y2="110" fill="none" stroke="#bce8f1" stroke-width="5"></line>
</svg>

折线polyline

属性：
points: 折线的顶点坐标，每个坐标之间用空格隔开，格式如：points="x1,y1 x2,y2 x3,y3..."

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <polyline points="10,110 30,10 90,60 110,110" fill="none" stroke="#bce8f1" stroke-width="2"></polyline>
</svg>

多边形polygon

属性：
points: 折线的顶点坐标，每个坐标之间用空格隔开，格式如：points="x1,y1 x2,y2 x3,y3...", 注意: 与polyline不同的是，polygon会将终点坐标和起点坐标连起来

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <polygon points="10,110 30,10 90,60 110,110" fill="#f00" stroke="#000" stroke-width="1"></polygon>
</svg>