基本形状
line
链接两个点的线段
attributes - x1 y1 x2 y2
x1 起始点 x 轴坐标
y1 起始点 y 轴坐标
x2 起始点 x 轴坐标
y2 起始点 y 轴坐标
(x1, y1) -> (x2, y2)
rect
画出一个矩形
attributes - x y width height rx ry
(x, y) - 这个点是左上角的位置
width - 宽度
height - 高度
rx - 定义 x 方向圆角半径
ry - 定义 y 方向圆角半径
circle
画出一个圆形
attributes - cx cy r
(cx, cy) - 圆心位置
r - 圆半径
ellipse
画出一个椭圆
attributes - cx cy rx ry
(cx, cy) - 圆心位置
rx - x 方向的半径
ry - y 方向的半径
polyline
用来创建一系列直线连接多个点,不闭合
attributes - points
polygon
画出一组首尾相连的直线线段构成的闭合多边形形状,跟polyline 唯一的区别在于 polygon 闭合, 而 polyline 不闭合
attributes - points
examples:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
<line x1="0" x2="100" y1="10" y2="10" stroke="#3b5998" stroke-width="3" stroke-opacity="0.6" />
<line x1="0" x2="100" y1="20" y2="20" stroke="red" stroke-width="3" />
<rect x="50" y="60" width="100" height="100" fill="#3b5998" rx="40" ry="5"/>
<circle cx="200" cy="50" r="10" fill="#3b5998" />
<ellipse cx="300" cy="100" fill="#3b5998" rx="60" ry="20" />
<polyline points="20,300 100,300 80,400 0,400" fill="none" stroke="#3b5998" stroke-width="3" />
<polygon points="20,500 100,500 80,600 0,600" fill="#3b5998" />
</svg>