适应图形/svg宽度的Guage值

我有一个滑块/量规/条形组件来选择一个值。拖动滑块时，它会更新一个值以提供用户反馈：

currentValue = Math.round((componentHeight - draggedValue) / componentHeight * vesselVolume);

滑块从溢出隐藏 div 父级内绝对 div 的顶部位置给出其值，给人一种可以升高和降低的仪表的错觉。

这一切正常。

问题

我正在使用仪表来估计容器中的液体体积。如果容器有水平、直边，很好，但可能没有。例如，一个桶会先凸出来然后再缩进去。

我可以在我的量规上使用遮罩来模拟正在填充的容器，但这让我想知道能够提取显示的容器中填充的一些体积的任务是非常复杂还是平易近人？

我将使用我自己的 SVG 图形，它可以提供简单的线数据。我正在研究是否可以在 vanilla javascript 中对 SVG 进行裁剪或布尔运算，我可以在其中裁剪仪表顶部到达的图形。

我想我然后可以计算结果图形的面积，如果提供适合整个容器的液体体积，则显示液体体积。

我没有提供深度信息，但目前我可以安全地假设所有血管都围绕 Y 轴对称。

我对涉及形状的数学有点无知，这项任务可行吗？作为妥协，我可以使用粗略的公式来模拟各种船只，如果它们近似地模拟以某个角度发散到某个高度等的边缘。