svg

path标签       https://www.jianshu.com/p/c819ae16d29b

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath

M， “Move to”命令， 需要两个参数，分别是需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。

M

        移动到的点的x轴和y轴的坐标

L

        需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

H

        绘制平行线

V

        绘制垂直线

Z

        从当前点画一条直线到路径的起点

S

        简写的贝塞尔曲线命令

Q

        二次贝塞尔曲线, Q命令：Q x1 y1, x y (or q dx1 dy1, dx dy)

C

        三次贝塞尔曲线, 三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：C x1 y1, x2 y2, x     y (or c dx1 dy1, dx2 dy2, dx dy)，最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的        控制点。

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轴半径，弧形命令A的第三个参数表示弧形的旋转情况，large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。

 

 

 

<!--矩形-->

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

</svg>

 

<!--三次贝塞尔曲线-->

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

    <circle cx="130" cy="110" r="2" fill="red"/>

    <circle cx="120" cy="140" r="2" fill="red"/>

    <line x1="130" y1="110" x2="120" y2="140" style="stroke:rgb(255,0,0);stroke-width:2"/>

    <circle cx="180" cy="140" r="2" fill="red"/>

    <circle cx="170" cy="110" r="2" fill="red"/>

    <line x1="180" y1="140" x2="170" y2="110" style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

<!--三次贝塞尔曲线简写-->

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

    <circle cx="10" cy="80" r="2" fill="red"/>

    <circle cx="40" cy="10" r="2" fill="red"/>

    <line x1="10" y1="80" x2="40" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

 

 

    <circle cx="65" cy="10" r="2" fill="red"/>

    <circle cx="95" cy="80" r="2" fill="red"/>

    <line x1="65" y1="10" x2="95" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>

 

 

    <circle cx="125" cy="150" r="2" fill="blue"/>

    <circle cx="180" cy="80" r="2" fill="red"/>

    <circle cx="150" cy="150" r="2" fill="red"/>

    <line x1="95" y1="80" x2="125" y2="150" style="stroke:blue;stroke-width:1"/>

    <line x1="180" y1="80" x2="150" y2="150" style="stroke:rgb(255,0,0);stroke-width:1"/>

</svg>

 二次贝塞尔曲线效果

三次贝塞尔曲线效果

三次贝塞尔曲线简写效果

 

二阶贝塞尔曲线原理