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 ...

Get SVG Essentials, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.