SVG形状元素: 6个(矩形 rect / 圆形 circle / 椭圆 ellipse / 线 line / 折线 polyline /多边形 polygon) +路径 path

矩形 rect width height


矩形: 定义左上角位置(x,y), 填充不透明度和描边不透明度

也可以定义整个元素的的不透明度: opacity:0.5;


圆角矩形 rect rx ry width height

rx 和 ry 属性可使矩形产生圆角。


圆 circle cx cy r

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)

r属性定义圆的半径


椭圆 ellipse cx cy rx ry

三个重叠的椭圆

组合2个椭圆


直线 line x1 y1 x2 y2


多边形 polygon points

五角星 填充方式: 非零环绕原则 fill-rule:nonzero;

五角星 填充方式: 奇偶原则 fill-rule:evenodd


曲线 polyline points

台阶


path 命令

二次方贝塞尔曲线,A 和 C 分别是起点和终点,B 是控制点:

A B C