path弧形参数svg_svg的path详解
path元素的形状是通过属性“d”定义的，属性d的值是⼀个“命令+参数”的序列，我们将讲解这些可⽤的命令，并且展⽰⼀些⽰例。
每⼀个命令都⽤⼀个关键字母来表⽰，⽐如，字母“M”表⽰的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后⾯的，是你需要移动到的那个点的x和y轴坐标。⽐如移动到(10,10)这个点的命令，应该写成“M 10 10”。这⼀段字符结束后，解析器就会去读下⼀段命令。每⼀个命令都有两种表⽰⽅式，⼀种是⽤⼤写字母，表⽰采⽤绝对定位。另⼀种是⽤⼩写字母，表⽰采⽤相对定位(例如：从上⼀个点开始，向上移动10px，向左移动7px)。
因为属性d采⽤的是⽤户坐标系统，所以不需标明单位。在后⾯的教程中，我们会学到如何让变换路径，以满⾜更多需求。
直线命令
元素⾥有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。⾸先是“Move to”命令，M，前⾯已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于⼀个点，在使⽤M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，⽤来指明从何处开始画。
M x y
或
m dx dy
这有⼀个⽐较好的例⼦，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下⾯的例⼦⾥会看到(10,10)坐标上有⼀个点。注意，如果只画path，这⾥什么都不会显⽰。(这段不太好理解，说明⼀下：为了更好地展⽰路径，下⾯的所有例⼦⾥，在⽤path绘制路径的同时，也会⽤circle标注路径上的点。)
能够真正画出线的命令有三个(M命令是移动画笔位置，但是不画线)，最常⽤的是“Line to”命令，L，L需要两个参数，分别是⼀个点的x 轴和y轴坐标，L命令将会在当前位置和新位置(L前⾯画笔所在的点)之间画⼀条线段。
L x y (or l dx dy)
另外还有两个简写命令，⽤来绘制⽔平线和垂直线。H，绘制⽔平线。V，绘制垂直线。这两个命令都只带⼀个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的⼀个⽅向上移动。
H x (or h dx)
V y (or v dy)
现在我们已经掌握了⼀些命令，可以开始画⼀些东西了。先从简单的地⽅开始，画⼀个简单的矩形(同样的效果⽤元素可以更简单的实现)，矩形是由⽔平线和垂直线组成的，所以这个例⼦可以很好地展现前⾯讲的画线的⽅法。
最后，我们可以通过⼀个“闭合路径命令”Z来简化上⾯的path，Z命令会从当前点画⼀条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不⽤区分⼤⼩写。
Z (or z)
所以上⾯例⼦⾥⽤到的路径，可以简化成这样：
你也可以使⽤这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使⽤的是⼩写字母，它们的参数不是指定⼀个明确的坐标，⽽是表⽰相对于它前⾯的点需要移动多少距离。例如前⾯的⽰例，画的是⼀个80*80的正⽅形，⽤相对命令可以这样描述：
上述路径是：画笔移动到(10,10)点，由此开始，向右移动80像素构成⼀条⽔平线，然后向下移动80像素，然后向左移动80像素，然后再回到起点。
你可能会问这些命令有什么⽤，因为 和 可以做到画出⼀样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好⽤，但是，path却是众多开发者在SVG绘制中经常⽤到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本⽣成path可能有所不同，因为另外两种⽅法只需要指明点，⽽path在这⽅⾯的语法会更复杂⼀些。
曲线命令
绘制平滑曲线的命令有三个，其中两个⽤来绘制贝塞尔曲线，另外⼀个⽤来绘制弧形或者说是圆的⼀部分。如果你在Inkscape、Illustrator 或者Photoshop中⽤过路径⼯具，可能对贝塞尔曲线有⼀定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请⾃⾏补习，本⼈也不是很精通，就不过多讲解。贝塞尔曲线的类型有很多，但是在path元素⾥，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和⼆次贝塞尔曲线Q。
贝塞尔曲线
我们从稍微复杂⼀点的三次贝塞尔曲线C⼊⼿，三次贝塞尔曲线需要定义⼀个点和两个控制点，所以⽤C命令创建三次贝塞尔曲线，需要设置三组坐标参数：
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
svg图形
这⾥的最后⼀个坐标(x,y)表⽰的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。(⽂字描述不好，上有图⽰，更直观。)
上⾯的例⼦⾥，创建了9个三次贝塞尔曲线。有⼀点⽐较遗憾，标记控制点的代码会⽐较庞⼤，所以在这⾥舍弃了。(之前所有点都⽤circle 标记，此处⼀样，只不过没把代码列出来)。如果你想更准确地控制它们，可以⾃⼰动⼿把他们画出来。图例上的曲线从左往右看，控制点在⽔平⽅向上逐渐分开，图例上的曲线从右往左看，控制点之间离得越来越远。这⾥要注意观察，曲线沿着起点到第⼀控制点的⽅向伸出，逐渐弯曲，然后沿着第⼆控制点到终点的⽅向结束。
你可以将若⼲个贝塞尔曲线连起来，从⽽创建出⼀条很长的平滑曲线。通常情况下，⼀个点某⼀侧的控制点是它另⼀侧的控制点的对称(以保持斜率不变)。这样，你可以使⽤⼀个简写的贝塞尔曲线命令S，如下所⽰：
S x2 y2, x y (or s dx2 dy2, dx dy)
S命令可以⽤来创建与前⾯⼀样的贝塞尔曲线，但是，如果S命令跟在⼀个C或S命令后⾯，则它的第⼀个控制点会被假设成前⼀个命令曲线的第⼆个控制点的中⼼对称点。如果S命令单独使⽤，前⾯没有
C或S命令，那当前点将作为第⼀个控制点。下⾯是S命令的语法⽰例，图中左侧红⾊标记的点对应的控制点即为蓝⾊标记点。
另⼀种可⽤的贝塞尔曲线是⼆次贝塞尔曲线Q，它⽐三次贝塞尔曲线简单，只需要⼀个控制点，⽤来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
Q x1 y1, x y (or q dx1 dy1, dx dy)
就像三次贝塞尔曲线有⼀个S命令，⼆次贝塞尔曲线有⼀个差不多的T命令，可以通过更简短的参数，延长⼆次贝塞尔曲线。
T x y (or t dx dy)
和之前⼀样，快捷命令T会通过前⼀个控制点，推断出⼀个新的控制点。这意味着，在你的第⼀个控制点后⾯，可以只定义终点，就创建出⼀个相当复杂的曲线。需要注意的是，T命令前⾯必须是⼀个Q命令，或者是另⼀个T命令，才能达到这种效果。如果T单独使⽤，那么控制点就会被认为和终点是同⼀个点，所以画出来的将是⼀条直线。
虽然三次贝塞尔曲线拥有更⼤的⾃由度，但是两种曲线能达到的效果总是差不多的。具体使⽤哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。
弧形
弧形命令A是另⼀个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的⼀部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点(在椭圆上)，根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯⼀，A命令需要⽤到⽐较多的参数：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
弧形命令A的前两个参数分别是x轴半径和y轴半径，它们的作⽤很明显，不⽤多做解释，如果你不是很清楚它们的作⽤，可以参考⼀下椭圆ellipse命令中的相同参数。弧形命令A的第三个参数表⽰弧形的旋转情况，下⾯的例⼦可以很好地解释它：
如图例所⽰，画布上有⼀条对⾓线，中间有两个椭圆弧被对⾓线切开(x radius = 30, y radius = 50)。第⼀个椭圆弧的x-axis-rotation(x 轴旋转⾓度)是0，所以弧形所在的椭圆是正置的(没有倾斜)。在第⼆个椭圆弧中，x-axis-rotation设置为-45，所以这是⼀个旋转了45度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图⽰中的第⼆个椭圆形。
对于上图没有旋转的椭圆，只有2种弧形可以选择，不是4种，因为两点连线(也就是对⾓线)正好穿过了椭圆的中⼼。像下⾯这张图，就是普通的情况，可以画出两个椭圆，四种弧。
上⾯提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆⽤来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这⾥要讲的参数是large-arc-flag(⾓度⼤⼩) 和sweep-flag(弧线⽅向)，large-arc-flag决定弧线是⼤于还是⼩于180度，0表⽰⼩⾓度弧，1表⽰⼤⾓度弧。sweep-flag表⽰弧线的⽅向，0表⽰从起点到终点沿逆时针画弧，1表⽰从起点到终点沿顺时针画弧。下⾯的例⼦展⽰了这四种情况。
你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，⽐如你可以创建若⼲⽚弧形，组成⼀个饼图。
如果你是从Canvas过渡到SVG，那么弧形会⽐较难以掌握，但它也是⾮常强⼤的。⽤路径来绘制完整的圆或者椭圆是⽐较困难的，因为圆上的任意点都可以是起点同时也是终点，⽆数种⽅案可以选择，真正的路径⽆法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使⽤真正的circle或者ellipse元素会更容易⼀些。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。