SVG path标签简介

2018-12-06 本文已影响0人沦陷_99999

path（路径）标签通过给出一系列点坐标来绘制，在D3绘制地图时经常用到。

其用法是给出一个坐标点，在坐标点前面添加一个英文字母，表示是如何运动到这个坐标点的。

英文字母按照功能分为5类：

大写绝对定位，小写相对定位

1、移动类 M

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

2、直线类

有L（lineto）、H（horizontal 水平 lineto）、V（vertical 垂直 lineto）

L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

3、曲线类

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

画3次贝塞尔曲线经两个制定控制点到达终点坐标

S = smooth curveto(S X2,Y2,ENDX,ENDY)

与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

画二次贝塞尔曲线经一个制定控制点到达终点坐标

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射

与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线

4、弧线类

A = elliptical Arc(A RX,RY,X-AXIS-ROTATION,LARGE-ARC-FLAG,SWEEP-FLAG,X,Y)：弧线

5、闭合类

Z = closepath()：关闭路径

作者：Raye123
来源：CSDN
原文：https://blog.csdn.net/qq_40100127/article/details/80185380
版权声明：本文为博主原创文章，转载请附上博文链接！