SVG中三角形的圆角

Question

我正在尝试制作一个具有圆角的三角形。该三角形将如下所示：

图片

底部左侧的角似乎是相对容易的，主要因为它是90度转弯。 使用SVG中的Q命令创建该转弯，并使用以下参数：Q x,y + height, x, y + height - RADIUS从我正在创建的弧的右侧开始。

然而，其他角取决于三角形的大小，是可变的。我可以使用atan()函数计算它们的角度，但我不知道如何实现它们。 我希望它遵循变量RADIUS（在此案例中为5）。

有任何想法吗？

- Mats Willemsen

Answer 1

我假设你只需要针对平行于基本轴的直角三角形，这会使事情变得更容易。

正如你所说，直角很容易计算。

对于其他角度，您需要计算圆的中心。假设w和h是三角形的宽度和高度。同时假设x、y是最右边节点的坐标。最右边三角形的中心是：x-r*h/w，y-r。弧线覆盖的角度是π-α，其中α是您用atan计算得出的角度。

最顶端的角落将以类似的方式处理。

这应该可以帮助您入门。

- Hubert OG

Answer 2

使用a命令，我可以使用特定的rX和rY制作非常详细的角。我会像这样调用函数：a 5 5 0 0 1 0 5 5，它将制作一个半径为5、dX = 5和dY = 5的圆。这是完美的。

当角度为90度时，半径最理想。因此，当我有一个50度的角时，我只需使用(50 / 90) * RADIUS的值，就可以得到完美的结果。

- Mats Willemsen