svg学习系列02-简单的svg图形和线条

矩形<rect />

<svg version="1.1" baseProfile="full" width="300" height="200">
    <rect x="20" y="20" rx="5" ry="5" width="100" height="100" fill="teal" />
</svg>

1、x：定义矩形左上角的点的x坐标

2、y：定义矩形左上角的点的y坐标

3、rx：定义矩形四个角的x方向圆角半径

4、ry：定义矩形四个角的y方向圆角半径

5、width：定义矩形的宽度

6、height：定义矩形的高度

圆形<circle />

<svg version="1.1" baseProfile="full" width="300" height="200">
    <circle cx="150" cy="100" r="50" fill="blue" />
</svg>

1、cx：圆心x坐标

2、cy：圆心y坐标

3、r：圆的半径

椭圆<ellipse />

<svg version="1.1" baseProfile="full" width="300" height="200">
    <ellipse cx="150" cy="100" rx="50" ry="100" fill="blue" />
</svg>

　　1、cx：椭圆中心点x坐标

　　2、cy：椭圆中心点y坐标

　　3、rx：椭圆水平半径

　　4、ry：椭圆垂直半径

线条<line />

<svg version="1.1" baseProfile="full" width="300" height="200">
      <line x1="100" y1="200" x2="250" y2="50" stroke="#000" stroke-width="5" />
</svg>

1、x1：线条起点x坐标

2、y1：线条起点y坐标

3、x2：线条终点x坐标

4、y2：线条终点y坐标

折线<polyline />

<svg version="1.1" baseProfile="full" width="300" height="200">
      <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="none" stroke="#000"/>
</svg>

1、points：折线各个点坐标

注意：设置了fill="none".

多边形<polygon />

<svg version="1.1" baseProfile="full" width="300" height="200">
      <polygon points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="#000"/>
</svg>

1、points：多边形各个点坐标