SVG路径（path）中的圆弧(A)指令的语法说明及计算逻辑

最新推荐文章于 2024-09-25 17:58:55 发布

转载最新推荐文章于 2024-09-25 17:58:55 发布 · 1.5k 阅读

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

HTML5

155 篇文章

订阅专栏

本文深入探讨SVG中复杂的椭圆弧指令(A)，解析其独特的参数形式与Canvas的区别，通过实例展示如何绘制不同条件下的椭圆弧，并解释了large-arc-flag与sweep-flag的作用。

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

原文出处：https://blog.youkuaiyun.com/cuixiping/article/details/79663611

延伸阅读：SVG (一) 图形, 路径, 变换总结; 以及椭圆弧线, 贝塞尔曲线的详细解释

SVG中的路径数据，即path元素的 d 属性，有一系列的路径绘制指令，其中椭圆弧指令(A)最复杂，不算椭圆弧起始点的x,y坐标的话，依然有 7 个参数。SVG椭圆弧指令的参数，与Canvas等圆弧指令的参数有很大差别，Canvas中使用圆心、半径、起始角度、结束角度等为参数，而SVG使用起始点坐标、半径、方向、结束点坐标等为参数。SVG之所以实现为这样的参数形式，是因为SVG中的路径包含的每段子路径具有依次首尾相连的特性，这样每一段路径绘制的起点终点就比较明确直观。

（如果是需要计算SVG椭圆弧的中心和角度，可以参考我之前写的一篇博文：
《根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数》）

SVG椭圆弧路径指令说明：

实例：

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />

  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" /> 

  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />

在其它参数确定的情况下，large-arc-flag 和 sweep-flag 的不同组合，共有 4 种情况，分别对应 4 段不同的椭圆弧。

<svg width="400" height="400">
  <path d="
    M 125,75 
    a100,50 0 ?,? 100,50
    "
    style="fill:none; stroke:red; stroke-width:6"/>
</svg>

把上面的 "?,?" 分别替换为 "0,0" "0,1" "1,0" "1,1" 就可以产生 4 种不同情况的椭圆弧：