javascript - 计算 SVG 元素内的面积

Question

给定一个像这个鱼缸这样的 SVG，我试图计算以粉红色定义的区域的体积占“填充水平”和“空水平”之间区域的百分比。

我不能从上到下做一个简单的百分比，因为鱼缸的形状是不规则的，这至少会使计算偏差几个百分点。我需要对许多不同形状的鱼缸执行此操作，因此需要一种算法来确定每个鱼缸的体积。

有什么方法可以在 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)，然后计算上面给出的积分。

可以使用数值积分技术(例如辛普森规则或Newton-Cotes 方法。