1. 矩形
示例
属性
原点: (x, y)
宽x高: (width, height)
填充: fill
描边: stroke
线宽: stroke-width
1
2
3
4
5
2
3
4
5
- 源码
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="100">
<rect x="10" y="20" width="150" height="60" fill="#a53f3c" stroke="none" stroke-width="1"></rect>
<rect x="170" y="20" width="150" height="60" fill="none" stroke="#00ffff" stroke-width="1"></rect>
<rect x="330" y="20" width="150" height="60" fill="#a53f3c" stroke="#00ffff" stroke-width="1"></rect>
</svg>
1
2
3
4
5
2
3
4
5
2. 圆形
示例
属性
圆心坐标: (cx, cy)
半径: r
填充: fill
描边: stroke
线宽: stroke-width
1
2
3
4
5
2
3
4
5
- 源码
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="100">
<circle cx="50" cy="50" r="40" fill="#a53f3c"></circle>
<circle cx="150" cy="50" r="40" fill="transparent" stroke="red" stroke-width="1"></circle>
<circle cx="250" cy="50" r="40" fill="#a53f3c" stroke="yellow" stroke-width="2"></circle>
</svg>
1
2
3
4
5
2
3
4
5
3. 椭圆
示例
属性
圆心坐标: (cx, cy)
X轴半径: rx
Y轴半径: ry
(当rx === ry)，椭圆 === 圆型
1
2
3
4
2
3
4
- 源码
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="100">
<ellipse cx="80" cy="50" rx="70" ry="40" fill="#a53f3c" stroke="none" stroke-width="1"></ellipse>
<ellipse cx="240" cy="50" rx="40" ry="40" fill="#a53f3c" stroke="none" stroke-width="1"></ellipse>
</svg>
1
2
3
4
2
3
4
4. 直线
示例
属性
起点A1：(x1, y2)
终点A2：(x2, y2)
填充：fill
描边：stroke
线宽：stoke-width
1
2
3
4
5
2
3
4
5
- 源码
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="100">
<line x1="0" y1="0" x2="740" y2="100" fill="none" stroke="#000000" stroke-width="1"></line>
</svg>
1
2
3
2
3
5. 折线
示例
属性
点坐标: points(ax,ay bx,by cx,cy)
1
- 源码
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="100">
<polyline points="0,0 100,100 200,0 300,100 400,0 500,100 600,0 700,100" fill="none" stroke="#a53f3c" stroke-width="2"></polyline>
</svg>
1
2
3
2
3
6. 多边形
- 示例
- 属性
点坐标: points(ax,ay bx,by cx,cy)
与polyline的区别在于，polygon会闭合起点和终点，围起来的部分颜色填充
1
2
2
- 源码
<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>
1
2
3
2
3