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.