Arcs through A in <svg:path>
To draw an arc around a single point you use the A command inside the d attribute in a path SVG element.
The format of the SVG code is
A rx ry rotation large-arc-flag sweep-flag endx endx
where
- rx, ry are the radii of the arc
- rotation is the X-axis-rotation: the rotation of the arc's x-axis compared to the normal x-axis, which most times will be just 0.
- large-arc-flag: whether to draw the smaller or bigger arc satisfying the start point, end point and rx and ry,
- sweep flag: whether the arc is mirrored around the axis going form start point to end point. Actually, the sweep-flag controls the direction the arc is drawn (clock-wise or counter-clock-wise) which results in a
mirroring
effect - endx,y is the endpoint or point that the arc is drawn to.
Note that the arc command (A) does not take an angle parameter, but an endpoint. Neither does it take a center parameter (cx, cy). It relies on the start point (which can be set through command M for Move
), the radii an the endpoint.
The radius of the arc is set by the two first parameters set on the A command. The first parameter is rx (radius in x-direction) and the second is ry (radius in y-direction). Setting rx and ry to the same value will result in a circular arc. Setting rx and ry to different values will result in an elliptical arc.
Four different arcs can be drawn from, say, point 40,20 to point 60,70. A long arc, a small arc, and two mirrored versions of each small/large arc. The large-arc-flag determines whether the large or small arc is to be drawn.