SVG Essentials, 2nd Edition

Appendix F. Converting Arcs to Different Formats

Converting from Center and Angles to SVG

The following JavaScript code converts an arc specified in center-and-angles format to a form suitable for placing into an SVG <path>:

/*
  Convert an elliptical arc based around a central point
  to an elliptical arc parameterized for SVG.

  Parameters are:
    center x coordinate
    center y coordinate
    x-radius of ellipse
    y-radius of ellipse
    beginning angle of arc in degrees
    arc extent in degrees
    x-axis rotation angle in degrees

  Return value is an array containing:
    x-coordinate of beginning of arc
    y-coordinate of beginning of arc
    x-radius of ellipse
    y-radius of ellipse
    x-axis rotation angle in degrees
    large-arc-flag as defined in SVG specification
    sweep-flag  as defined in SVG specification
    x-coordinate of endpoint of arc
    y-coordinate of endpoint of arc
*/

function centeredToSVG(cx, cy, rx, ry, theta, delta, phi)
{
  var endTheta, phiRad;
  var x0, y0, x1, y1, largeArc, sweep;

  /*
    Convert angles to radians. I need a separate variable for phi as
    radians, because I must preserve phi in degrees for the
    return value.
  */
  theta = theta * Math.PI / 180.0;
  endTheta = (theta + delta) * Math.PI / 180.0;
  phiRad = phi * Math.PI / 180.0;

  /*
    Figure out the coordinates of the beginning and ending points
  */
  x0 = cx + Math.cos(phiRad) * rx * Math.cos(theta) +
    Math.sin(-phiRad) * ry * Math.sin(theta);

  y0 = cy + Math.sin(phiRad) * rx * Math.cos(theta) +
    Math.cos(phiRad) * ry * Math.sin(theta);

  x1 = cx ...