SVG - A/a 或 C/c 圆角背后的数学运算
SVG - Maths behind rounded corners with A/a or C/c
当我深入研究 SVG 时，我发现自己试图在 <path> 秒内圆角。
考虑网络示例并查看类似但更具体的问题的答案，我发现最常见的方法是使用某种曲线或圆弧。
弧线 (A/a) 背后的想法似乎很简单，但是关于如何计算数学的博客 post 很难找到，或者在组织不完善的网站上。
看到examples that use C/c后我很迷茫，我找不到一个格式良好且统一的博客post。
如果有一个 SO 答案和一些关于 nice posts 的资源用于舍入边缘或直接解释数学和实现
，世界将是多么美好
答案应该假定：
- 没有图书馆（可能作为额外的参考，但不是图书馆唯一的答案）
- 转角为非正交角（非 90 度）的路径
- 如何在某些特定的地方变得更容易 angles/lengths
- 使用圆弧和曲线之间的效率差异（哪一个最适合用于什么目的和在什么情况下使用）
- 一般示例（具体但不难想象的值，例如 100 个中的值就可以）
答案可以只列出精心呈现和介绍的资源，并需要解释预期在 link 中找到的内容以及简短描述和摘要
你想解决什么数学问题？
假设您想要 "round" 个角，即圆形，那么在大多数情况下，圆弧将是您想要使用的。它的优点是通常不需要计算数学。您将拥有圆弧的起点（传入路径段停止的地方）。然后添加一个圆弧，你只需要提供它：
- 你想要的曲线半径
- 圆弧相对X轴的旋转。对于圆弧，这将为 0，因此对于您的情况也是如此。
- 大圆弧旗。对于每条弧都会有两条潜在的弧：两点之间的最短弧，或者围绕圆
的"long way"
- 扫旗。这是方向：顺时针或逆时针
圆弧的终点
真的很简单。您可能需要一些数学运算才能计算出圆弧的终点，但仅此而已。
A 命令的所有这些参数的完整解释可以在 SVG 规范的路径部分找到。
https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
当我深入研究 SVG 时，我发现自己试图在 <path> 秒内圆角。
考虑网络示例并查看类似但更具体的问题的答案，我发现最常见的方法是使用某种曲线或圆弧。
弧线 (A/a) 背后的想法似乎很简单，但是关于如何计算数学的博客 post 很难找到，或者在组织不完善的网站上。
看到examples that use C/c后我很迷茫，我找不到一个格式良好且统一的博客post。
如果有一个 SO 答案和一些关于 nice posts 的资源用于舍入边缘或直接解释数学和实现
，世界将是多么美好答案应该假定：
- 没有图书馆（可能作为额外的参考，但不是图书馆唯一的答案）
- 转角为非正交角（非 90 度）的路径
- 如何在某些特定的地方变得更容易 angles/lengths
- 使用圆弧和曲线之间的效率差异（哪一个最适合用于什么目的和在什么情况下使用）
- 一般示例（具体但不难想象的值，例如 100 个中的值就可以）
答案可以只列出精心呈现和介绍的资源，并需要解释预期在 link 中找到的内容以及简短描述和摘要
你想解决什么数学问题？
假设您想要 "round" 个角，即圆形，那么在大多数情况下，圆弧将是您想要使用的。它的优点是通常不需要计算数学。您将拥有圆弧的起点（传入路径段停止的地方）。然后添加一个圆弧，你只需要提供它：
- 你想要的曲线半径
- 圆弧相对X轴的旋转。对于圆弧，这将为 0，因此对于您的情况也是如此。
- 大圆弧旗。对于每条弧都会有两条潜在的弧：两点之间的最短弧，或者围绕圆 的"long way"
- 扫旗。这是方向：顺时针或逆时针
圆弧的终点
真的很简单。您可能需要一些数学运算才能计算出圆弧的终点，但仅此而已。
A 命令的所有这些参数的完整解释可以在 SVG 规范的路径部分找到。
https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands