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

男娘i 2022-04-15 04:26 214阅读 0赞

原文出处：[https://blog.csdn.net/cuixiping/article/details/79663611 ][https_blog.csdn.net_cuixiping_article_details_79663611]

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

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

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

实例：

![arcs01.png][]

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

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

[https_blog.csdn.net_cuixiping_article_details_79663611]: https://blog.csdn.net/cuixiping/article/details/79663611
[SVG _ _ _ _ _ _]: https://segmentfault.com/a/1190000004393817?_ea=1158881#articleHeader5
[SVG_Javascript]: https://blog.csdn.net/cuixiping/article/details/7958298
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220415/45088cf21af1425982779819e78df6d3.png
[arcs01.png]: /images/20220415/d870231551d944709833d83d1609ecbf.png
[arcs02.png]: /images/20220415/40bbeb6faad94f449f1f220286e5565b.png