svg path 路径

 许多字母命令(例如:M m)(但不是全部)成对。有一个大写和一个小写版本。大写版本是绝对版本,小写是相对版本。让我们继续以M为例:

  • M 100,100 意思是“拿起笔并将其移动到确切的坐标100,100”
  • m 100,100 的意思是“将笔100向下移动100和从你现在的任何地方向右移动100”。
  • 大小字母绝对坐标,小写字母相对坐标

许多命令具有相同的设置。“笔”当前位置的小写版本因素。【每一个点 2个值, 负数向反方向走】

Mx,y 移动到绝对坐标x,y
mx,y 向右移动x并向下移动y(如果为负值,则向左移动并向上移动)
Lx,y 绘制一条直线到绝对坐标x,y
lx,y 绘制一条直线,指向相对正确的x和向下y的点(或者如果为负值,则向上并向上)
Hx 水平画一条直线到确切的坐标x
hx 相对于右侧x水平绘制一条线(如果为负值,则向左侧绘制一条线)
Vy 垂直绘制一条直线到确切的坐标y
vy 垂直相对向下画一条线(如果是负值,则向上画一条线)
Z(或z 画一条直线回到路径的开始处(从当前位置到起点画一条直线闭合)

 

 

 

 

 

 

 

 

C命令需要三点。前两个点定义了两个贝塞尔曲线手柄的位置,三点中的最后一点是曲线的终点。

S(或s)命令是与C类似命令,它需要2个,因为它假设第一贝塞尔点是从最后一个S或C命令的最后一个Bezier点的反映。(右)

1.如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。

2.如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。

Q命令它需要两个点。它想要的贝塞尔点是一个“二次曲线”控制点。就好像它的起点和终点在控制句柄结束的地方共享一个点。(左)

T命令Q命令的简写命令。与S命令相似,T也会通过前一个控制点,推断出一个新的控制点。

  1.T命令前面必须是一个Q命令,或者是另一个T命令。

  2.如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。

A命令可能是最复杂的,或者至少需要最多的数据。你可以给它定义一个椭圆的宽度,高度,椭圆旋转方式以及终点的信息。允许不闭合。可以想像成是椭圆的某一段,共七个参数。

 参数:rx,ry x-axis-rotation large-arc-flag sweep-flag x,y

   RX,RY指所在椭圆的半轴大小( 弧的半长轴长度, 弧的半短轴长度)
 XROTATION指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度(是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针旋转角度)。
 FLAG1只有两个值,1表示大角度弧线,0为小角度弧线。
 FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
 X,Y为终点坐标; 这个2个觉得着椭圆的大小

然后获得更多有关沿着该椭圆的哪条路径的信息,您希望获得该路径:

有两个可能的路径椭圆和两个不同的椭圆路径,给出四条可能的路径。

第一个参数是大弧标志。它只是确定弧线是否应该大于或小于180度; 最后,这个标志决定弧线将围绕给定的圆周运行的方向。

第二个参数是扫描标志。它确定弧线是否应该开始以负角度或正角度移动,这基本上会选择您将要绕行的两个圆圈中的哪一个。

 

CcX1,cY1 cX2,cY2 eX,eY 绘制基于两个贝塞尔控制点的贝塞尔曲线,并在指定坐标处结束
C 与所有相对值相同
ScX2,cY2 eX,eY 基本上,假定第一个贝塞尔控制点的C命令是前一个S或C命令中最后一个贝塞尔点的反映
s 与所有相对值相同
QcX,cY eX,eY 根据单个贝塞尔控制点绘制贝塞尔曲线,并在指定坐标处结束
q 与所有相对值相同
TeX,eY 基本上,假设第一个贝塞尔控制点的Q命令是前一个Q或T命令中使用的最后一个贝塞尔点的反映
t 与所有相对值相同
ARX,RY旋转,弧,扫,EX,EY 绘制一条基于椭圆形曲线的弧线。首先定义椭圆的宽度和高度。然后是椭圆形的旋转。随着终点,这使得两个可能的椭圆。所以弧和扫描是0或1,并确定哪个椭圆和哪条路径。
a 与eX,eY的相对值相同

 

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

L = lineto(L X,Y) :画直线到指定的坐标位置

H = horizontal lineto(H X):画水平线到指定的X坐标位置

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

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

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):映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线

Z = closepath():关闭路径

编辑路径:http://jxnblk.com/paths/

svg 说明使用:https://css-tricks.com/svg-path-syntax-illustrated-guide/  #英语不好,可以谷歌浏览器打开

https://www.sitepoint.com/closer-look-svg-path-data/

svg 其他一些生成路径地址:https://juejin.im/entry/59b5e629f265da065f047ad6

svg 其他工具 http://developer.51cto.com/art/201508/488797.htm

posted @ 2018-03-02 12:27  柔和的天空  阅读(1447)  评论(0编辑  收藏  举报