Calculating the area of an SVG Path or Polygon
posted 2012-Apr-6
Someone on Stack Overflow asked, “How do I calculate the area underneath a Bézier curve?”
If we approximate an SVG Path with an arbitrary polygon (see this demo) it becomes really easy (and fast) to get a close answer. See the standalone demo, or just play below. The cool part is that it works for any arbitrary SVG Path.
Note that loops appear as ‘positive area’ in SVG, but are calculated as negative area. For example, a symmetrical figure 8 would come out with an area of ‘0’.
Gavin Kistner
06:58PM ET 2018-Jan-26 |
Oops. This demo is broken on Chrome due to them deprecating and removing an SVG feature. I need to update it. |