4

I need to create SVG paths with rounded corners to export them to DXF for cutting. My problem is that the corners should be arcs of a circle, not some bezier curve.

Its relatively easy with right angles using the arc command because the radius is also the distance from the corner to where the arc begins. With other angles it is way more complicated.

Is there a formula to calculate the start and end point of the arc given a corner and a radius?

enter image description here

The upper right corner is easy but the lower left is very tricky because I have to find out where the line has to end and the arc begins.

I've found calculationg with a svg eliptical arc, which links a formula to convert end-point to center parametrization. Which doesn't help because I also don't know where the center of the circle has to be.

How to calculate the SVG Path for an arc (of a circle) just calculates the arc, not an arc between two lines replacing a sharp corner.

The solutions in Rounded corners on triangle in SVG work only when some sides are parallel to the coordinate system or change the radius.

Applying rounded corners to paths/polygons tries to use some tricks with linejoin or several cubic curves, nothing I want.

Even Inkscape (which I used to draw the image above) uses 5 cubic curves instead of an arc even when I used a circle to create this shape.

If you have some hints how I can manage this I would be very grateful.

Community
  • 1
  • 1
Dehalion
  • 757
  • 1
  • 7
  • 16
  • Browsers generally implement arc drawing via one or more Beziers so even if you work out the right arc to draw it won't change anything. – Robert Longson Nov 11 '13 at 16:49
  • It does change things for me because the SVG I generate is not only displayed in the browser but later exported to DXF for cutting or plotting. And here it is important to have a chamfered corner with constant corner radius. – Dehalion Nov 12 '13 at 09:02
  • How would you define a rounded corner for not-right angles using Beziers so you don't have deviation from a circular arc? Is there an algorithm for calculating the control points? I would like to have only one arc/curve in the corner so the path doesn't get too complicated. – Dehalion Nov 12 '13 at 09:09

1 Answers1

10

The geometry of a chamfered corner looks like this:

geometry of a chamfered corner

Angle ABC is equal to θ (the outside angle of the chamfered corner). This is bisected by BD, so angle DBC is equal to θ/2. That means the offset distance d from the corner to points C and A is equal to r × tan(θ/2).

For a right angle, θ=90° and tan(θ/2)=1, so d is equal to r.

As Robert Longson said, you would be lucky to find an SVG application that exports chamfered corners using circular arc segments. However, with a bit of effort, it should be possible to detect and convert them programmatically.

r3mainer
  • 23,981
  • 3
  • 51
  • 88
  • That looks very promising, thank you. I have to export the path to DXF later to cut out things or plot them so it is relevant to me. Works great with right angles already and I want to allow other angles too. – Dehalion Nov 12 '13 at 09:05
  • Update: Works great. `Math.abs(radius * Math.tan((180-angle)/2)` if you have the angle of the corner and the radius. – Dehalion Dec 17 '13 at 18:01
  • @Dehalion, I would be curious to see your final code for the chamfering of SVG paths if it's easily extractable from your program. I have a similar problem where I need to programmatically generate rounded corners for a laser cutting-pattern with non-right angles. – Yona Appletree Feb 05 '14 at 20:43
  • @Hypher I'm preparing a blog post on this, please hold on a bit :D – Dehalion Feb 11 '14 at 10:33