SVG中三角形的圆角 [英] Rounded corners on triangle in SVG

问题描述

我正在尝试制作一个带有圆角的三角形.三角形看起来像这样:

I'm trying to make a triangle that has rounded corners. The triangle will look like this:

左下角是唯一一个看起来很容易制作的角，主要是因为这是90度的转弯".该转弯是使用SVG中的Q命令并具有以下参数进行的:

The bottom left corner is the only one that seems fairly easy to make, mostly because that is a 90 degree 'turn'. That turn is made using the Q command in SVG with the following parameters:

Q x,y + height, x, y + height - RADIUS从我正在创建的弧线的右边开始.

Q x,y + height, x, y + height - RADIUS starting at the right bit of the arc I'm creating.

但是，其他角是可变的，具体取决于三角形的大小.我可以使用atan()函数来计算它们的角度，但是我不知道如何实现它们.我希望它遵循RADIUS变量(在这种情况下为5).

However, the other corners are variable, depending on the triangle size. I can calculate their angles using atan() functions, but I have no clue how to implement them. I would like it to follow the RADIUS variable (5 in this case).

有什么想法吗?

推荐答案

使用a命令，我可以使用特定的rX和rY进行非常详细的弯角.我会像这样调用该函数:

Using the a command I can make very detailed corners with a certain rX and rY. I would call the function like:

a 5 5 0 0 1 0 5 5，它将形成一个半径为5的圆，dX = 5和dY = 5.这是完美的.

a 5 5 0 0 1 0 5 5, and it will make a circle with radius 5 and dX = 5 and dY = 5. Which is perfect.

半径在90度时是理想的，因此当我有50度角时，只需使用(50 / 90) * RADIUS作为值，这是完美的.

The radius is ideal at 90 degrees, so when I have a 50 degree corner I just use (50 / 90) * RADIUS for the values, and it's perfect.

这篇关于SVG中三角形的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！