Question

How can I calculate the size of a circle from a set of arcs?

Specifically, I have this SVG path definition which draws a circle, I'm looking to work out its size.

<path clip-path="url(#SVGID_2_)" fill="#99C44C" d="M334.293,56.846c0-4.782,3.88-8.659,8.665-8.659c4.78,0,8.66,3.877,8.66,8.659
    c0,4.783-3.88,8.661-8.66,8.661C338.173,65.507,334.293,61.629,334.293,56.846"/>

For your information, the circle is drawn in the 'd' attribute. M334.293,56.846 moves to this x,y position, then the c commands are curves.

Curves:

Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow.

relative curves
c0-4.782,3.88-8.659,8.665-8.659
c4.78,0,8.66,3.877,8.66,8.659
c0,4.783-3.88,8.661-8.66,8.661

absolute curve
C338.173,65.507,334.293,61.629,334.293,56.846
Was it helpful?

Solution

At this juncture you have two possibilites:

You can treat the bezier curve as a circle (which is, as commented, wrong; it's just really circle-looking). To calculate the area, determine the radius and use π * r^2 as usual.

If you want to calculate generally the area enclosed by a path element; that requires some moderate calculus, and is not for the faint of heart.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top