path元素(2)

path元素(2)

path元素用于确定一条路径，需要配合相应的指令才能使用

M/m指令与L/l指令

M/m相当于canvas中的moveTo，L/l指令相当于canvas中的lineTo

M/L是依照绝对坐标确定点，m/l是依照相对坐标确定点

path{
    stroke: black;
}

<svg id="svg">
    <path d="M 10 10 L 100 100 M 100 100 L 250 0"></path>
</svg>

/*也可以这样*/
path{
    stroke: black;
    fill: transparent;
}

<svg id="svg">
    <path d="M 10 10 L 100 100 250 0"></path>
</svg>

要使用stroke才能将路径展现出来

H/h指令与V/v指令

H/h表示水平方向移到某个x处，V/v表示垂直方向上移到某个y处

H/V是依照绝对坐标确定点，h/v是依照相对坐标确定点

path{
    stroke: black;
    fill: transparent;/*默认会在形式上进行封闭，然后填充*/
}

<svg id="svg">
    <path d="M 10 10 H 100 V 100"></path>
</svg>

相当于以(10,10)为起点，移动到(100,0)，再移动到(100,100)

z命令

其表示闭合，用于将起点与终点连起来。不区分大小写，没有相对于绝对之分

path{
    stroke: black;
    fill: transparent;
}

<svg id="svg">
    <path d="M 10 10 H 100 V 100 z"></path>
</svg>

A圆弧指令

其有七个参数

rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx ry 圆弧的x轴半径和y轴半径(实际上是椭圆，当然，rx,ry相等时变为圆了)

x-axis-rotation 圆弧相对x轴的旋转角度，默认是顺时针，可以设置负值

large-arc-flag 表示圆弧路径是大圆弧还是小圆弧 1大圆弧

sweep-flag 表示从起点到终点是顺时针还是逆时针，1表示顺时针，0表示逆时针

x y 表示终点坐标

path{
    stroke: black;
    fill: transparent;
}

<svg id="svg">
    <path d="M 250 250 A 25 50 0 1 1 300 300"></path>
</svg>

Q二次贝赛尔曲线

还有一个命令与Q配合使用——T——表示延伸二次贝塞尔曲线

书写格式为

Q x1 y1, x2 y2 T x y

同canvas中一样，当前画笔所在点、x1,y1、x2,y2这三点来确定贝塞尔曲线

path{
    stroke: black;
    fill: transparent;
}

<svg id="svg">
    <path d="M 100 100 Q 250 50 200 300 T 400 50"></path>
</svg>

首先a,b,c三点确定一条贝塞尔曲线，再做(250,50)关于(200,300)的对称点，然后c,d,e三点又确定一条贝塞尔曲线来延伸之前的贝塞尔曲线

C三次贝塞尔曲线

还有一个命令与C配合使用——S——表示延伸三次贝塞尔曲线

书写格式为

C x1 y1, x2 y2, x3, y3 S x4 y4, x5 y5

这儿延伸同二次贝塞尔一样，做x2,y2关于x3,y3的对称点，然后x3,y3、对称点、x4,y4、x5,y5确定延伸的贝塞尔曲线

path{
    stroke: black;
    fill: transparent;
}

<svg id="svg">
    <path d="M 100 100 C 250 50 200 300 250 350 S "></path>
</svg>

推荐一个网址：http://editor.method.ac/