计算 SVG 元素内的面积
Calculating volume of area within SVG element
给定一个 SVG，例如这个鱼缸，我正在尝试计算以粉红色定义的区域的体积占 "fill level" 和 "empty level" 之间区域的百分比。
我不能做简单的从上到下的百分比，因为鱼缸的形状是不规则的，这至少会使计算偏差几个百分点。我需要为许多不同形状的鱼缸做这个，所以需要一个算法来确定每个鱼缸的体积。
有什么方法可以在 SVG 元素上用 javascript 做到这一点，如果可以，我有什么方法可以在元素区域内以百分比的形式计算出来吗？
更新： 将示例 SVG 上传到 jsfiddle
首先，您需要将 SVG 路径解析为线条。因为他们都不交叉
Y 轴，这减少了找到由鱼缸引起的曲线下的面积，
也称为积分。
设{x_0, x_1, ..., x_n}为线段X坐标的绝对值。
代表鱼缸图的函数是分段函数：
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)
则鱼缸的体积等于πf(x)2的积分（旋转体由该函数构成） .
设e为空位，v为填充位，w为水位.
那么鱼缸的装满部分的比例为：
(∫ew πf(x)2 dx) / (∫ev πf(x)2 dx)
如果您的鱼缸是由函数图生成的，请将该函数用作 f(x)，然后计算上面给出的积分。
可以使用数值积分技术（例如辛普森规则或
Newton-Cotes 方法。
A 我需要一个在计算成本方面不会令人望而却步的解决方案，而且我没有心情编写优化代码，我最终在透明背景下渲染它，转换为光栅，然后计算像素.我确信在图形和几何方面有经验的人可以提出更清晰的解决方案，但我用高级语言优化的代码不太可能 运行 比那些献身于此并编写的人更快 运行组装.
根据鱼缸几何形状的复杂性，您当然可能需要提高渲染分辨率。
[2021 年新增]
这个 SO 答案使用上面描述的暴力方法计算 one <path> 的面积：
给定一个 SVG，例如这个鱼缸，我正在尝试计算以粉红色定义的区域的体积占 "fill level" 和 "empty level" 之间区域的百分比。
我不能做简单的从上到下的百分比，因为鱼缸的形状是不规则的，这至少会使计算偏差几个百分点。我需要为许多不同形状的鱼缸做这个，所以需要一个算法来确定每个鱼缸的体积。
有什么方法可以在 SVG 元素上用 javascript 做到这一点，如果可以，我有什么方法可以在元素区域内以百分比的形式计算出来吗？
更新： 将示例 SVG 上传到 jsfiddle
首先，您需要将 SVG 路径解析为线条。因为他们都不交叉 Y 轴，这减少了找到由鱼缸引起的曲线下的面积， 也称为积分。
设{x_0, x_1, ..., x_n}为线段X坐标的绝对值。
代表鱼缸图的函数是分段函数：
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)
则鱼缸的体积等于πf(x)2的积分（旋转体由该函数构成） .
设e为空位，v为填充位，w为水位.
那么鱼缸的装满部分的比例为：
(∫ew πf(x)2 dx) / (∫ev πf(x)2 dx)
如果您的鱼缸是由函数图生成的，请将该函数用作 f(x)，然后计算上面给出的积分。
可以使用数值积分技术（例如辛普森规则或 Newton-Cotes 方法。
A 我需要一个在计算成本方面不会令人望而却步的解决方案，而且我没有心情编写优化代码，我最终在透明背景下渲染它，转换为光栅，然后计算像素.我确信在图形和几何方面有经验的人可以提出更清晰的解决方案，但我用高级语言优化的代码不太可能 运行 比那些献身于此并编写的人更快 运行组装.
根据鱼缸几何形状的复杂性，您当然可能需要提高渲染分辨率。
[2021 年新增]
这个 SO 答案使用上面描述的暴力方法计算 one <path> 的面积：