SVG path标签简介

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
版权声明:本文为博主原创文章,转载请附上博文链接!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,725评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,974评论 3 40
  • 导语 黑科技来了,Google在Android5.X中增加了对SVG矢量图形的支持,这对于创造新的高效率动画具有很...
    一个有故事的程序员阅读 17,436评论 9 64
  • 转眼已经18年底了,在Androd这行已经混了3年,一直说写些东西,总是没有执行。有想法的时候没时间,有时间的时候...
    茫茫前路一行者阅读 1,022评论 0 0
  • 文/迎风奔跑 每一次远游都是再次相聚, 每一次远游总是有个归期, 每一次远游归来夏冬两季, 每一次远游内心期盼归来。
    c迎风奔跑阅读 226评论 0 5