SVG之path详解，全面解析椭圆弧命令A

前言：

转载于b站深坑妙脆角，讲解清晰明了，对初使用path圆弧命令非常友好

作者：深坑妙脆角 https://www.bilibili.com/read/cv35872299/?jump_opus=1 出处：bilibili

简述：
SVG 中的 <path> 元素用于创建路径，它是 SVG 中最强大和最灵活的基本形状之一

使用 <path> 元素可以绘制直线、曲线、弧线等各种复杂的图形，并且可以通过设置路径命令来控制路径的形状和样式

在进入正题前，先温习一下svg的坐标系，x轴为水平向右，y轴为垂直向下

基本语法：

属性解析：

d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。

常用的路径命令包括：M(移动)、L(直线)、H(水平线)、V(垂直线)、C(三次贝塞尔曲线)、S(光滑三次贝塞尔曲线)、Q(二次贝塞尔曲线)、T(光滑二次贝塞尔曲线)、A(椭圆弧)、Z(闭合路径)等

每个路径命令都有大写字母(绝对)和小写字母(相对)两种表示方式

d属性详解
主要定义了路径的路径数据，由描述路径的一系列命令数据组成

命令数据主要由命令及命令参数组成，多个命令参数之间可用空格或逗号(英文逗号)隔开
M
该命令用于移动画笔位置

M | m后可跟2个参数：

x：横坐标位置
y：纵坐标位置

例：

L属性详解
该命令用于绘制一条直线

会在当前位置与命令描述位置之间绘制一条直线

L | l后可跟2个参数：

x：直线结束点横坐标位置
y：直线结束点纵坐标位置

例：

H属性详解
该命令用于绘制一条水平直线

会在当前位置与命令描述位置之间绘制一条水平直线

H | h后可跟1个参数：

x：水平直线结束点横坐标位置

例：

V属性详解
该命令用于绘制一条垂直直线

会在当前位置与命令描述位置之间绘制一条垂直直线

V | v后可跟1个参数：

y：垂直直线结束点纵坐标位置

例：

A属性详解
该命令主要用于描述椭圆弧，有两种写法：A(绝对)或a(相对)

表示经过起始点(即上一条命令的结束点)，到结束点之间画一段椭圆弧

A | a后可跟7个参数：

这两个参数好理解，就是椭圆的两条对称轴半径，相等即为圆

也可以写比例，写比例时默认用符合条件的最小值，此时参数4就没有意义了(会出现下图右侧的情况)

large-arc-flag：大弧标志，0表示绘制小弧，1表示绘制大弧。弧线有两个不同的弧度(小于180度的弧和大于180度的弧)，该标志用于指定使用哪种弧度，简单理解就是短弧和长弧
sweep-flag：扫掠标志，0表示弧线从起点到终点沿逆时针方向绘制，1表示沿顺时针方向绘制
x: 终点的x坐标
y: 终点的y坐标

参数之间用空格隔开，如：Arx ry x-axis-rotation large-arc-flag sweep-flag x y
例：

M50 100 A50 100 0 1 0 150 100
表示：