In the vector image format SVG, elliptical arcs are portions of an ellipse, that are represented using an endpoint parameterization. This parametrization is described in W3C SVG implementation notes:

An elliptical arc is a particular path command. As such, it is described by the following parameters in order:

$(x_1, y_1)$ are the absolute coordinates of the current point on the path, obtained from the last two parameters of the previous path command.

$r_x$ and $r_y$ are the radii of the ellipse (also known as its semi-major and semi-minor axes).

$φ$ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.

$f_A$ is the large arc flag, and is 0 if an arc spanning less than or equal to 180 degrees is chosen, or 1 if an arc spanning greater than 180 degrees is chosen.

$f_S$ is the sweep flag, and is 0 if the line joining center to arc sweeps through decreasing angles, or 1 if it sweeps through increasing angles.

$(x_2, y_2)$ are the absolute coordinates of the final point of the arc.

(See also W3C recommendations on the elliptical arc curve commands for an illustration of how the $f_A$ and $f_S$ flags play.)

I would like to apply an affine transformation to such an elliptical arc.

Problem Given an elliptical arc $\mathcal{A}: \left\{(x_1, y_1), r_x, r_y, φ, f_A, f_S, (x_2, y_2)\right\}$, and an affine transformation of the plane $\mathbf{T} = \left(\matrix{a & b & e \\ c & d & f \\ 0 & 0 & 1}\right)$, what are the parameters of elliptical arc $\mathcal{A'}: \left\{(x_1', y_1'), r_x', r_y', φ', f_A', f_S', (x_2', y_2')\right\}$, such that for any $\left(\matrix{x \\ y \\ 1}\right) \in \mathcal{A}, \mathbf{T}\left(\matrix{x \\ y \\ 1}\right) \in \mathcal{A'}$?

Simplifications? There appear to be two easy simplifications to this problem:

  • consider a linear transformation,
  • consider a full ellipse (as opposed to an arc), of radii $r_x$ and $r_y$, rotation $φ$, and passing through $(x_1, y_1)$.

What I tried I am thinking that the following approach should do the trick:

  • convert the ellipse to center parameterization (as described here);
  • write the Cartesian equation of the ellipse, an express it with matrices (see eg. this answer);
  • apply the linear / affine transformation to this equation, and retrieve the new centre and radii;
  • convert everything back to endpoint parametrization (as described here).

However the expressions get really long. Is there a better way to solve this problem?

  • $\begingroup$ You should at least explain what SVG is... $\endgroup$
    – Jean Marie
    Apr 6 '18 at 19:56
  • $\begingroup$ Thank you @JeanMarie, I’ve added a short description and link. This should not be truly relevant to the problem itself, though. $\endgroup$
    – Arcturus B
    Apr 6 '18 at 20:03
  • $\begingroup$ HAve you come up with a solution to this? I have the exact same problem. $\endgroup$
    – gct
    Sep 4 '19 at 22:07
  • $\begingroup$ Another approach would be to replace the arcs with cubic bezier curves. Applying an affine matrix on cubic bezier curves is very simple, you only have to transform the control points. $\endgroup$
    – Waruyama
    Feb 13 at 14:09
  • $\begingroup$ Hi, has there been any progess on this question? If so, could you please answer either here or on a similar post I made here. Thanks! $\endgroup$ Aug 9 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.