SVG路径PATH

SVG路径PATH

在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具（FLASH里的钢笔工具比PS里的好用）

PATH用到的指令：

M----（X Y）：移动到

Z----(none)：关闭路径

L----（X Y）：画线到

H----(X)：水平线到

V----(Y)：垂直线到

C----(X1 Y1 X2 Y2 X Y)：三次贝塞尔曲线

S----(X1Y1 X Y)：光滑三次贝塞尔曲线到

Q----(X1 Y1 X Y)：二次贝塞尔曲线到

T----(X Y)：光滑二次贝塞尔曲线到

A----(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+：椭圆弧

R----(X1 Y1(X Y))：Catmull-Rom曲线

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

-----------------------------------------------------------------------------------------------

先创建一个AVG画布

定义样式：

<style>
        .svgStyle{
            border: solid 1px #000000;
            margin: 0 auto;
            display: block
        }
        .pathStyle{
            stroke:#000000;
            stroke-width:5px;
            fill:none
        }
    </style>

创建SVG：

<svg width="1200px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgStyle">
        <path d="M 0 300 " class="pathStyle" />
    </svg>

M：开始画线的起点坐标。

-------------------------------------------------------------------------------------------------------------------------------

L----（X Y）+：画线到：

<svg width="1200px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgStyle">
         <path d="M 10 300 L 100 300 L 50 400" class="pathStyle" />
    </svg>

即:从坐标（0，300）开始画线到坐标（100，300）再画线到坐标（50，400）

---------------------------------------------------------------------------------------------------------------------

Z----(none)：关闭路径：

<path d="M 10 300 L 100 300 L 50 400 Z" class="pathStyle" />

即：闭合路径--自动从最后一个点和起点之间连一条线

--------------------------------------------------------------------------------------------------------

H----(X)+：水平线到

<path d="M 10 300 H 400" class="pathStyle" />

即：根据前一个一点，水平方向画一条线，只要一个X坐标。

----------------------------------------------------------------------------------------------------------------

V----(Y)+：垂直线到

与H同理：垂直画线

-----------------------------------------------------------------------------------------------------------------

C----(X1 Y1 X2 Y2 X Y)+：三次贝塞尔曲线：

<path d="M 10 300 C 100 200 200 400 400 300 C 500 100 550 500 600 300" class="pathStyle" />

啊吖！红线画得实在太丧心病狂。。

总之实际应用的时候，我们的目的图形肯定是由多个直线或者曲线组成的，而C的两个坐标中，第一个坐标就是对相对当前线段的起点进行弯曲，第二个坐标则是相对当前线段的末尾点进行弯曲。

---------------------------------------------------------------------------------------------------------------------

S----(X1 Y1 X Y)+：光滑三次贝塞尔曲线到

单独使用S：

<path d="M 0 300  S 200 500  400 300 S 600 500  800 300" class="pathStyle" />

跟M结合：<path d="M 10 300 C 100 200 200 400 400 300 S 600 500  1000 300" class="pathStyle" />

（S属于三次贝塞尔曲线，所以跟他配合使用的也要用三次贝塞尔曲线，如M）

S只要一个控制点，这个控制点会控制当前线的前后点进行平滑，类似于两个C的两个点合在一起了。

当S和其它指令结合的时候，他会自动将当前的线段和上一线段进行平滑。就好像如图所示自动加一条控制线---绿色的线

就是好是使用钢笔工具连接描点的时候，没有转换点。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Q----(X1 Y1 X Y)+：二次贝塞尔曲线到

<path d="M 0 300  Q 200 500  400 300 Q 600 500  800 300" class="pathStyle" />

如图。跟S很像，一个控制点当两个用，跟S的区别在于两线段之间不会平滑过渡。

--------------------------------------------------------------------------------------------------------------------------------------------------

T----(X Y)：光滑二次贝塞尔曲线到

<path d="M 0 300 Q 300 0  600 300 T 1000 50" class="pathStyle" />

功能跟S是一样的，T也是将两个线段自动进行平滑

(T是二次贝塞尔曲线，所以跟它配合使用的也要用二次贝塞曲线，如Q)

------------------------------------------------------------------------------------------------------------------------------------------

A----(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+：椭圆弧

rx：椭圆水平方向的半径

ry：椭圆垂直方向的半径

x-axis-rotation：X轴的旋转角度，即椭圆绕起始点顺时针旋转的角度

large-arc-flag：此参数有两个值，分别为0和1。0代表小角度弧线，1代表大角度弧线；

sweep-flag：此参数也有两个值，分别为0和1。1代表从起点到终点弧线绕中心顺时针方向，0代表逆时针方向、1代表顺时针方向；

x，y：弧线的终端坐标。

<path d="M 500 300 A 100 200 0 0 1 700 300"></path>

先画个半个椭圆：

x-axis-rotation和large-arc-flag：这里旋转45度

<path d="M 500 300 A 100 200 45 0 1 700 300"></path>

蓝色线是我标上去的，为了好理解

--------------------------------------------------------------------------------------------------------------------------------------

R----(X1 Y1(X Y))：Catmull-Rom曲线    还不会 暂且搁置

---------------------------------------------------------------------------------------------------------------------------------------

总结：

（1）路径的坐标与坐标之间可以用空格分隔，也可以用逗号分隔，如 <path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z">

（2）命令使用大写，意味着点是相对两个SVG画布进行绝对定位的。如果命令使用的是小写，这意味着此命令定义的坐标和前面的当前位置是相对的

（3）C跟S配合使用，Q和T配合使用。

（4）S和T会将两个线段的连接自动平滑

参考:http://weick.iteye.com/blog/677986