Calculating the volume of an area in an SVG element
Given an SVG like this fish bowl, I'm trying to calculate the volume of the pink area as a percentage of the area between "fill level" and "empty level".
I can’t do a simple percentage from top to bottom, as the fish bowl is irregular, and this will throw the calculation by at least a few percentage points. I need to do this for many fish bowls of different shapes, so an algorithm is needed to determine the volume of each bowl.
Is there a way to do this with javascript on an SVG element, and if so, can I somehow figure this out in the percentage area of elements?
Update: Loaded SVG sample at jsfiddle
source to share
First you need to parse the SVG path to strings. Since they all do not intersect the y-axis, it boils down to finding the area under the curve caused by the fish bowl, also known as the integral.
Let {x_0, x_1, ..., x_n} be the absolute value of the X-coordinates of the line segments.
The function representing the graph of the aquarium is a piecewise function:
f(x) =
{ (x - x_0)/(x_1 - x_0) if x_0 <= x < x_1
{ (x - x_1)/(x_2 - x_1) if x_1 <= x < x_2
{ ...
{ (x - x_(n-1))/(x_n - x_(n-1)) if x_(n-1) <= x < x_(n)
Then the volume of the aquarium is equal to the integral of [pi]. f (x) 2 (rigid body of revolution formed by this function).
Let e - empty level, v - fill level, w - water level.
Then the ratio of the filled part of the aquarium is:
(∫ ew & pi; f (x) 2 dx) / (∫ ev & pi; f (x) 2 dx)
If instead your aquarium is generated by a graph of a function, use that function like f(x)
and then calculate the integral above.
The integral can be approximated using numerical integration methods such as Simpson's rule or Newton-Cotes method.
source to share