请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-5-24 21:13 编辑
对优弧与劣弧的清晰认识有助于理解 svg path 标签的 d 属性的相关参数，故此，有必要研究一下优弧与劣弧。我们以一个圆为例，在 300*200 的 svg 场景下，用一横线将圆划分为大小不一致的两个部分，横线与圆周的交点我们也给标注了出来（本文所有的 svg 代码，均在CSS中制定了相关样式，紫色文本的代码都是指向图形中标记性的元素）：
<svg>
<circle cx="150" cy="100" r="50" />
<line x1="0" y1="80" x2="300" y2="80" class="line" />
<circle cx="104" cy="80" r="2" class="circle" />
<circle cx="196" cy="80" r="2" class="circle" />
</svg>
运行以上代码，圆被横线一分为二，横线上面的弧线较小，叫劣弧，下面的弧线较大，叫优弧。优弧劣弧的主要依据是圆心在不在还弧形之内，圆心若在，则是优弧，否则是劣弧，这是优弧劣弧的数学依据。
下面，了解一下 svg path 标签 d 属性的 A 指令。A 指令用于画弧线，之前我们介绍过，它需要七个参数，这里再介绍一下：
参数1：X轴半径
参数2：Y轴半径
参数3：X轴旋转度（顺时针方向为正，0表示不旋转）
参数4：1优弧还是0劣弧（大于半圆的弧叫优弧、小于半圆的弧叫劣弧）>
参数5：弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
参数6：终点X坐标
参数7：终点Y坐标
接下来，我们开始用 path 路径 d 属性 的 A 指令绘制前面的圆的上部分，劣弧：
<p>凸面朝上的劣弧</p>
<svg>
<path d="M104 80 A50 50 0 0 1 196 80" />
<line x1="0" y1="80" x2="300" y2="80" class="line" />
<circle cx="104" cy="80" r="2" class="circle" />
<circle cx="196" cy="80" r="2" class="circle" />
</svg>
以上代码，红色数值是指令 A 的第四个参数，用于定义优弧（1）或劣弧（0），蓝色数值是第五个参数，用于设定弧线的方向：1 为顺时针方向，0 为逆时针方向。
继续，我们绘制优弧：
<p>凸面朝下的优弧</p>
<svg>
<path d="M104 80 A50 50 0 1 0 196 80" />
<line x1="0" y1="80" x2="300" y2="80" class="blue" />
<circle cx="104" cy="80" r="2" class="green" />
<circle cx="196" cy="80" r="2" class="green" />
</svg>
参数4（优弧或劣弧）和参数5（弧线方向）的组合，可以产生四种形态的弧线：凸面朝上（或朝左）的劣弧（0 1）、凸面朝下（或朝右）的优弧（1 0），正如前面两个示例所展示的一样。还有，凸面朝下（或朝右）的劣弧（0 0）：
<p>凸面朝下的劣弧</p>
<svg>
<path d="M104 80 A50 50 0 0 0 196 80" />
<line x1="0" y1="80" x2="300" y2="80" class="blue" />
</svg>
以及，凸面朝上的优弧(1 1)：
<p>凸面朝上的优弧</p>
<svg>
<path d="M104 80 A50 50 0 1 1 196 80" />
<line x1="0" y1="80" x2="300" y2="80" class="blue" />
<circle cx="104" cy="80" r="2" class="green" />
<circle cx="196" cy="80" r="2" class="green" />
</svg>
以上，① 我们的示例都是基于正圆的弧线，若需要绘制椭圆弧线，只需将 A 指令的第一和第二个参数即X、Y轴半径设置为不同数值即可；② A 指令使用了绝对定位，若需要使用相对定位，把大写 A 写成小写 a 且相关数值要做相应改变即可。
| 
发表于 2023-5-24 21:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-5-24 21:22
小白踮脚尖够得着不
发表于 2023-5-24 23:58
发表于 2023-5-25 06:22