Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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)
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •