svg(1) path路径
注: 笔记来自于http://www.jb51.net/html5/72250.html 以及http://blog.csdn.net/u013291076/article/details/27078345,本文引用纯粹为了用于了解path路径,当做笔记记录。
基础:
- <path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
- path标签通过属性d来定义路径,定义信息由一段字符串构成,另外path也可以通过fill和stroke属性来定义填充和边框。
- d属性的信息其实并不复杂,由字母和数字构成,数字表示坐标点,字母负责表示如何连接这些坐标点。比如上面的示例中,M表示起点,L表示直线连接,所以d的信息可以这样解读:
- M100,100 -> 以(100,100)坐标点为起点
- L200,200 -> 从(100,100)向(200,200)画一条直线
- L200,400 -> 从(200,200)向(200,400)画一条直线
- 在path标签的d属性中,一共有10个命令可以使用,下面5个命令是基础,比较简单。
- M 移动到(moveTo) x,y 开始点坐标
- Z 闭合路径(closepath) 将路径的开始和结束点用直线连接
- L 直线(lineTo) x,y 当前节点到指定(x,y)节点,直线连接
- H 水平直线 x 保持当前点的y坐标不变,x轴移动到x,形成水平线
- V 垂直直线 y 保持当前点的x坐标不变,y轴移动到y,形成垂直线
绘制圆弧指令:A rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。下面解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
前两个参数和后两个参数就不多说了,很简单;下面就说说中间的3个参数:
x-axis-rotation代表旋转的角度,体会下面例子中圆弧的不同:
复制代码
代码如下:<svg width="320px" height="320px">
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
上面的HTML画出下面的图形:
从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同,当然这个参数对正圆来说没有影响。