09——svg中path的使用

一、path 是 svg 中最强大的图形

用于定义一个 路径
所有命令均允许小写字母。大写 表示绝对定位，小写 表示相对定位（相对于上一个结束的坐标）
d 属性中包含所有路径的点，可根据命令缩写 自由组合

     命令            名称                                参数
      M           moveto  移动到                        (x y)+
      Z          closepath  关闭路径                    (none)
      L           lineto  画线到                        (x y)+
      H          horizontal lineto  水平线到              x+
      V          vertical lineto  垂直线到                y+
      A        elliptical arc椭圆弧                    (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
      C        curveto 三次贝塞尔曲线到                 (x1 y1 x2 y2 x y)+
      S     smooth curveto光滑三次贝塞尔曲线到          (x2 y2 x y)+
      Q        Bézier curveto二次贝塞尔曲线到           (x1 y1 x y)+
      T     smooth Bézier curveto光滑二次贝塞尔曲线到     (x y)+

二、M、L、H、V 简单使用总结

M 作为起点，Z 作为结束
+ 表示一次或多次
M 移动画笔，若有多个参数，会当做是 L 命令处理（画线）
L 画直线；H 移动水平位置；V 移动垂直位置
L 绘制直线到指定位置； l 从当前绘制直线移动多少多少
H 绘制水平线到指定位置；h 从当前绘制长度为多少的水平线
V 绘制竖直线到指定位置；v 从当前绘制长度为多少的竖直线

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="1000"height="1000"><pathd="M 150 0 L 0 150 L 300 150 Z"fill="pink"/><pathd="M 150 0 l 0 150 H 300 Z"fill="pink"/></svg>

在这里插入图片描述

三、圆弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
最复杂的命令
rx``````ry 表示 x轴半径 和 y轴半径
x-axis-rotation 表示 x轴旋转角度
large-arc-flag 表示弧线 是否大于180度 (1 是大弧线，0 是小弧线)
sweep-flag 表示 弧线方向 ( 0为沿逆时针，1为沿顺时针 )
x``````y 为 最终坐标

<!-- x转旋转角度 --><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 0  1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 10 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 100 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 200 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 300 1 1 300 300"stroke="red"fill="none"></path></svg>

在这里插入图片描述

<!-- 可自行修改  large-arc-flag、sweep-flag查看  --><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100, 0, 1, 1, 300 300"fill="green"/></svg>

在这里插入图片描述

四、贝塞尔曲线

首先是理解贝塞尔曲线的原理，然后套用使用参数即可
由于数学原理相对复杂，这里不做过多介绍，放上两张图便于理解
二次贝塞尔曲线 ，一个起点、一个终点、一个控制点

在这里插入图片描述

三次贝塞尔曲线 ，一个起点、一个终点、两个控制点

在这里插入图片描述

可依次解开代码查看，效果如下

<svgwidth="1000"height="400"><!-- 二次贝塞尔曲线 Q --><pathid="lineAB"d="M 100 350 l 150 -300"stroke="red"stroke-width="3"fill="none"/><pathid="lineBC"d="M 250 50 l 150 300"stroke="red"stroke-width="3"fill="none"/><pathd="M 175 200 l 150 0"stroke="green"stroke-width="3"fill="none"/><pathd="M 100 350 q 150 -300 300 0"stroke="blue"stroke-width="5"fill="none"/><!-- 光滑二次贝塞尔曲线 T --><!-- <path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2;"/> --><!-- 三次贝塞尔曲线 C --><!-- <path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2;"/> --><!-- 光滑三次贝塞尔曲线 S --><!-- <path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2;"/> --></svg>

在这里插入图片描述