【H5】 svg便签内的path标签画椭圆弧：_svg path 画椭圆-优快云博客

本文详细解析了SVG中path标签的A命令，用于绘制椭圆弧。通过具体实例，介绍了A命令参数的意义，包括长轴半径、短轴半径、角度、弧长类型、方向及终点坐标，展示了如何使用不同参数组合绘制完整的椭圆。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【H5】 svg便签内的path标签画椭圆：

path标签：A(椭圆弧)

A命令后面跟7个值：
A命令 x-径 y半径角度弧长(0小弧/1大弧) 方向(0逆时针/1顺时针) 终点(x,y)

<!-- 
        d属性 
            M(起始坐标),
            L(结束坐标),
            H(水平线),
                大写的H相当于x的坐标
                小写的h相当于长度；
                取值可以正值，可取负值，取负值的时候等于取反方向【反坐标】
            V(垂直线),
                大写V是直接去找y坐标
                小写v是找长度，可取负值，负值代表反方向；
            A(圆弧),
                 A命令 x-径 y半径 角度 弧长(0小弧/1大弧) 方向(0逆时针/1顺时针) 终点(x,y)
            Z(闭合路劲)
     -->

    <div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;background-color: #90f;">
        <svg xmlns="http://www.w3.org/2000/svg" width='500' height='500' style="stroke: red;stroke-width: 10;fill: pink;">
        <!-- M:起始坐标(100,300) / A:100长轴半径 50短轴半径 / 角度:70 / 弧长(0小弧) / 方向(0逆时针) / 终点(x y)-->
            <path d='M200 100 A100 50 70 0 0 200 400'></path>
        </svg>
    </div>

运行结果如下：

在这里插入图片描述

解说一下：

在这里插入图片描述

我们再画椭圆的另外一半椭圆弧

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;background-color: #90f;">
        <svg xmlns="http://www.w3.org/2000/svg" width='500' height='500' style="stroke: red;stroke-width: 10;fill: pink;">
        <!-- M:起始坐标(100,300) / A:100长轴半径 50短轴半径 / 角度:70 / 弧长(1大弧) / 方向(1顺时针) / 终点(x y)-->
            <path d='M200 100 A100 50 70 1 1 200 400'></path>
        </svg>
    </div>

在这里插入图片描述

两个一起画：

 <div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;background-color: #90f;">
        <svg xmlns="http://www.w3.org/2000/svg" width='500' height='500' style="stroke: red;stroke-width: 10;fill: pink;">
        <!-- M:起始坐标(100,300) / A:100长轴半径 50短轴半径 / 角度:70 / 弧长(0小弧) / 方向(0逆时针) / 终点(x y)-->
            <path d='M200 100 A100 50 70 0 0 200 400'></path>
        <!-- M:起始坐标(100,300) / A:100长轴半径 50短轴半径 / 角度:70 / 弧长(1大弧) / 方向(1顺时针) / 终点(x y)-->
            <path d='M200 100 A100 50 70 1 1 200 400'></path>
        </svg>
    </div>

在这里插入图片描述