I'm trying to make a triangle that has rounded corners. The triangle will look like this:
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 starting at the right bit of the arc I'm creating.
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).
Any ideas?
I assume you only need this for right angle triangles with sides parallel to basic axes, this makes things a bit easier.
As you've said, the right angle is easy.
For other angles, you need to calculate centers of the circles. Let's say w and h are width and height of the triangle. Let's also say x, y are the coordinates of the rightmost node. The center of the rightmost triangle is: x - r * h / w, y - r. The angle that's covered by the arc you need to draw is π - α, where α is the corner angle you've calculated with atan.
Topmost corner will be handled similarly.
This should get you started.
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, and it will make a circle with radius 5 and dX = 5 and dY = 5. Which is perfect.
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.
来源：https://stackoverflow.com/questions/17659423/rounded-corners-on-triangle-in-svg