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)

SVG路径PATH-LMLPHP

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

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

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

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

SVG路径PATH-LMLPHP

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

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

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

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

SVG路径PATH-LMLPHP

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

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" />

SVG路径PATH-LMLPHP

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

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

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

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

单独使用S:

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

SVG路径PATH-LMLPHP

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

(S属于三次贝塞尔曲线,所以跟他配合使用的也要用三次贝塞尔曲线,如M)

SVG路径PATH-LMLPHP

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" />

SVG路径PATH-LMLPHP

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

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

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

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

SVG路径PATH-LMLPHP

功能跟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>

先画个半个椭圆:

SVG路径PATH-LMLPHP

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

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

SVG路径PATH-LMLPHP

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

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

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

04-02 06:10