SVG - 使用A / a或C / c圆角后面的数学

Question

当我深入研究SVG时，我发现自己试图在<path> s中绕过角落。

考虑网络示例并查看类似但更具体的问题的答案，我发现最常见的方法是使用某种曲线或弧线。

arcs（A / a）背后的想法看起来非常简单，但关于如何计算数学的博客文章无处可寻，或者组织得不好的网站。

看到examples that use C/c之后，我很遗憾，我找不到一个格式良好且统一的博客文章。

如果有一个很好的帖子可以回答边缘或直接解释数学和实现的SO答案，那么世界会很棒

答案应该假设：

• 没有图书馆（可能是额外的参考文献，但不是图书馆的答案）
• 以非正交角度（非90度）的角落的路径
• 在某些特定角度/长度下如何更容易
• 使用弧线和曲线之间的效率差异（哪一个最适合用于什么目的和在什么情况下使用）
• 通用示例（特定但不难以可视化的值，例如，100个就好了）

答案可以列出精心呈现和引入的资源，并需要解释链接中预期会发现的内容以及简短描述和摘要

Answer 1

你想弄清楚什么数学？

假设你想要＆＃34; round＆＃34;角落，意思是圆形，然后在大多数情况下，弧形将是你想要使用的。它的优点是通常没有数学可以搞清楚。您将拥有弧的起点（传入路径段停止的位置）。然后添加弧，您只需要提供：

1. 您想要的曲线半径
2. 弧相对于X轴的旋转。对于圆弧，这将是0，因此也适用于您的情况。
3. 大弧旗。对于每个弧线，将有两个可能的弧线：两点之间的最短弧线，或者长距离线路＃34;围绕圈子
4. 扫掠旗帜。这是方向：顺时针或逆时针

5. 弧的终点

   

真的很简单。你可能需要一些数学来计算弧的末端，但这就是它。

可以在SVG规范的Paths部分找到A命令的所有这些参数的完整说明。

https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands