上一篇我们说了说基本形状的通用属性，填充和边框的相关内容。今天罗列一下SVG里的基本形状元素。
SVG的基本形状元素包含：
- 直线 - line
- 折线 - polyline
- 多边形 - polygon
- 矩形 - rect
- 圆形 - circle
- 椭圆形 - ellipse
- 路径 - path
以上这些形状中除了最后一个path有些特殊和复杂以外其他形状都比较简单，只要给他们相应的属性赋予数值或坐标值就可以了。说到坐标值，我们先看看SVG的坐标系统。
SVG坐标系统
每一个形状都有他自己的坐标系，在默认情况下，他们的坐标系是这样的
坐标原点(0, 0)在
svg元素的左上角
x轴正方向为从左到右
y轴正方向为从上到下
角度正方向为从x轴开始绕原点顺时针旋转
可以通过设置元素的transform属性以改变他们的坐标系状态，这个我们下一篇详细介绍。
形状元素
line
line元素用来绘制一个直线线段，它的坐标属性有起点坐标x1、y1，终点坐标x2、y2
<line x1="20" y1="20" x2="100" y2="80" stroke="red"></line>
polyline
polyline用于绘制多个首尾相连的直线线段，需要为他指定一组坐标点给points属性，他将给定的坐标依次用直线线段连接。
<polyline points="30 30, 80 50, 90 70, 200 120" fill="none" stroke="green"></polyline>
坐标的数字可以用逗号、空格分隔
注意，所有有面积的形状都可以有填充，填充的区域是边框开始的点与结束的点用一条隐形的直线连接后所封闭的空间。当我们只想要轮廓而不需要填充时，给fill属性赋值none即可
polygon
polygon与polyline几乎一样，除了他会自动为终点坐标与起始坐标连接一个线段，形成一个封闭的形状。所以当stroke-width为0或者stroke为none时，即只有填充没有边框时，polygon与polyline是完全一样的
<polygon points="30 30, 80 50, 90 70, 200 120" fill="red"></polygon>
rect
rect需要一个坐标x、y和宽高width、height
<rect x="100" y="30" width="40" height="20" fill="yellow" stroke="blue"></rect>
circle
circle需要一个圆心坐标cx、cy，以及半径r
<circle cx="300" cy="200" r="90" fill="steelblue"></circle>
ellipse
ellipse与circle一样需要一个圆心坐标cx、cy，但他需要两个半径rx、ry，即一个 水平半径 和一个 垂直半径
<ellipse cx="300" cy="300" rx="100" ry="40" fill="none" stroke="red"></ellipse>
path
path可用于绘制复杂图形，贝塞尔曲线、直线等都可以，矩形或多边形能够用他替代，同时也能 近似 的绘制圆（在数学标准上，使用贝塞尔曲线无法绘制出标准的圆）。他主要使用d属性来控制，属性的值是一组指令的集合，由于过于复杂，我们以后再专门讨论。
微信公众号同步更新，欢迎关注
var_web
网友评论