其他分享
首页 > 其他分享> > svg

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>

 二次贝塞尔曲线效果

三次贝塞尔曲线效果

三次贝塞尔曲线简写效果

 

二阶贝塞尔曲线原理

 

标签:svg,曲线,贝塞尔,large,命令,flag,坐标
来源: https://blog.csdn.net/qq_38865022/article/details/114326544