基本形状 - SVG从入门到起飞【3】

2018-06-07 本文已影响0人狂菜飞

上一篇我们说了说基本形状的通用属性，填充和边框的相关内容。今天罗列一下SVG里的基本形状元素。
SVG的基本形状元素包含：

直线 - line
折线 - polyline
多边形 - polygon
矩形 - rect
圆形 - circle
椭圆形 - ellipse
路径 - path
以上这些形状中除了最后一个path有些特殊和复杂以外其他形状都比较简单，只要给他们相应的属性赋予数值或坐标值就可以了。说到坐标值，我们先看看SVG的坐标系统。

SVG坐标系统

每一个形状都有他自己的坐标系，在默认情况下，他们的坐标系是这样的

坐标原点(0, 0)在svg元素的左上角
x轴正方向为从左到右
y轴正方向为从上到下
角度正方向为从x轴开始绕原点顺时针旋转

可以通过设置元素的transform属性以改变他们的坐标系状态，这个我们下一篇详细介绍。

line元素用来绘制一个直线线段，它的坐标属性有起点坐标x1、y1，终点坐标x2、y2

<line x1="20" y1="20" x2="100" y2="80" stroke="red"></line>

polyline用于绘制多个首尾相连的直线线段，需要为他指定一组坐标点给points属性，他将给定的坐标依次用直线线段连接。

<polyline points="30 30, 80 50, 90 70, 200 120" fill="none" stroke="green"></polyline>

坐标的数字可以用逗号、空格分隔
注意，所有有面积的形状都可以有填充，填充的区域是边框开始的点与结束的点用一条隐形的直线连接后所封闭的空间。当我们只想要轮廓而不需要填充时，给fill属性赋值none即可

polygon与polyline几乎一样，除了他会自动为终点坐标与起始坐标连接一个线段，形成一个封闭的形状。所以当stroke-width为0或者stroke为none时，即只有填充没有边框时，polygon与polyline是完全一样的

<polygon points="30 30, 80 50, 90 70, 200 120" fill="red"></polygon>

rect需要一个坐标x、y和宽高width、height

<rect x="100" y="30" width="40" height="20" fill="yellow" stroke="blue"></rect>

circle需要一个圆心坐标cx、cy，以及半径r

<circle cx="300" cy="200" r="90" fill="steelblue"></circle>

ellipse与circle一样需要一个圆心坐标cx、cy，但他需要两个半径rx、ry，即一个 水平半径 和一个 垂直半径

<ellipse cx="300" cy="300" rx="100" ry="40" fill="none" stroke="red"></ellipse>

path可用于绘制复杂图形，贝塞尔曲线、直线等都可以，矩形或多边形能够用他替代，同时也能近似的绘制圆（在数学标准上，使用贝塞尔曲线无法绘制出标准的圆）。他主要使用d属性来控制，属性的值是一组指令的集合，由于过于复杂，我们以后再专门讨论。

微信公众号同步更新，欢迎关注

var_web