计算SVG元素内的区域体积

Question

鉴于这个鱼缸之类的SVG，我试图计算粉红色定义区域的体积，作为填充水平与＃34;之间面积的百分比。和＆＃34;空水平＆＃34;。

我不能从上到下做一个简单的百分比，因为鱼缸的形状不规则，这将使计算至少减少几个百分点。我需要为许多不同形状的鱼碗做这个，所以需要一个算法来确定每个碗的体积。

我有什么方法可以在SVG元素上使用javascript来实现这一点，如果有的话，我有什么方法可以在元素区域内以百分比形式解决这个问题吗？

更新：将示例SVG上传到jsfiddle

Answer 1

首先，您需要将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） ² 的积分（该函数形成的旋转实体）。

让 e 为空级别， v 为填充级别， w 为水位。

然后鱼缸的填充部分的比例是：

（∫ _e ^w πf（x） ² dx）/（∫ _e ^v πf（x） ² dx）

如果您的鱼缸是由函数图生成的，请将该函数用作f(x)，然后计算上面给出的积分。

积分可以使用数值积分技术近似，例如辛普森的规则或 牛顿 - 科特方法。

Answer 2

A 我需要一个解决方案，它在计算成本方面并不令人望而却步，而且我也没有心情编写优化的代码，我最终在透明背景下渲染它，转换为光栅，然后计算像素。我相信在图形和几何方面有经验的人可以提出更简洁的解决方案，但我用高级语言优化的代码不太可能比那些致力于此并用汇编编写的人的代码运行得更快。

根据鱼缸几何形状的复杂性，您当然可能需要提高渲染分辨率。

[2021 添加]

此 SO 答案使用上述蛮力方法计算 one <path> 的面积：Scaling the filling portion of an SVG path