Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: SVG Arcs - A javascript fix for "d" attribute issues

1. ## SVG Arcs - A javascript fix for "d" attribute issues

A simple circular arc with path data as d="M100,100 A30,30 0 0 0 200,100" specifies a radius of 30; but SVG draws it with a radius of 50 without cautioning that the specified radius is short and, still worse, path.getAttribute("d") method returns the radius as 30 only.
Similarly, a circular arc with path data as d="M200,100 A30,30 0 0 0 100,100" specifies the direction flag as "0"; but SVG draws the arc counterclockwise, as the points are in reverse order.
The path.getAttribute("d") method is expected to return the geometric data of an arc as drawn by SVG; there is no issue for the purposes of drawing. But if you use the retrieved data to calculate the center, angles and other parameters, there seems to be a bug in the said two situations; libraries like path-data-polyfill.js also suffer the same.
1) when the radius is shorter than half the distance between the two points, SVG 'increases' the given radius and forms a semi-circle; but the "d" attribute is not updated and it returns only the original short radius.
javascript fix:
After getting the radius from the data by getAttribute("d"), update the radius yourself, if noted, to half the distance between the two points. Assume x1,y1 & x2,y2 are the points and rr is input radius; then:
var dx=x2-x1
var dy=y2-y1
cc=0.5*Math.sqrt(dx*dx+dy*dy)
if(cc>rr){rr=cc}

2) Even if you set the flags to " 0 0 0 ", SVG 'automatically' changes the direction of the arc, when the two points are unwittingly in the reverse order; the "d" data still shows the flags as " 0 0 0 " and does not warn you that the points are to be in the same order.
javascript fix:
Get the mid-point of the chord; get the length and mid-point of the arc using API functions getTotalLength() & getPointAtLength(). Use these two midpoints and direction of the line joining them to calculate the center.
A snippet with the above metods, calculating and enumerating 18 properties of the arc is enclosed; it draws the radii, center and tangents of the arc and reports the "d" attributes as well.
(U Jayakodi)