我想了解svg和javascript的实现。我有一个装有水的容器来显示水位。我需要根据输入框中的值更新水位。该路径用于显示水位，很难更新水位。我该如何更新水位？
这是代码
// 100 - full
// 75 - average
// 50 - half
// 25 - Low
// 0 - Empty
document.getElementsByName('water-level')[0].addEventListener('change', updateWaterLevel);
function updateWaterLevel() {
console.log('e', this.value);
}<input type="number" value="" name="water-level"/>
<svg viewBox="0 0 600 600" >
<defs>
<mask id="liquidMask">
<path id="tubeLiquidShape" fill="#FFFFFF" d="M246.6,358.9l110.2-0.6c0.6,0,1.1-0.2,1.5-0.6c0.1-0.1,0.2-0.3,0.3-0.4
c0.4-0.6,0.5-1.4,0.2-2c0,0-12.3-28.7-17.9-41.9c-28.6,6.6-55.4-3.9-78.1,0.1c-9,21-18.2,42.5-18.2,42.5c-0.2,0.7-0.2,1.4,0.2,2
C245.2,358.6,245.9,358.9,246.6,358.9z" />
<g id="bubbleGroup">
<circle cx="267.3" cy="371" r="10.3" fill="#000000" />
<circle cx="324.3" cy="390" r="10.3" fill="#111111" />
<circle cx="288.6" cy="386.3" r="6.6" fill="#7f7f7f" />
<circle cx="288.6" cy="368.5" r="7.6" fill="#2d2d2d" />
<circle cx="340.3" cy="370" r="3" fill="#333333" />
<circle cx="300" cy="378.3" r="3" />
<circle cx="279.4" cy="379.7" r="2" />
<circle cx="337.3" cy="363" r="2" />
<circle cx="309.7" cy="383.2" r="2" />
<circle cx="309.7" cy="371" r="4.3" />
<circle cx="327" cy="368.5" r="6.1" />
</g>
</mask>
</defs>
<g id="tubeGroup">
<path id="tubeOutline" fill="#444444" d="M268.4,224.7c-4.1,0-8,1.6-10.9,4.5c-2.9,2.9-4.5,6.8-4.5,10.9l0,12.3
c0,4.1,1.6,8,4.5,10.9c2,2,4.6,3.5,7.3,4.1l-35.4,82.8c-2.2,5.7-1.5,12.1,1.9,17.1c3.4,5.1,9.2,8.1,15.3,8.1l110.1-0.6
c4.8,0,9.3-1.8,12.7-5.1c0.1-0.1,0.3-0.3,0.3-0.3c0.9-0.9,1.7-1.9,2.4-2.9c3.4-5.2,4-11.8,1.5-17.4l-35-81.5c2.9-0.6,5.6-2,7.7-4.2
c2.9-2.9,4.5-6.8,4.5-10.9l0-12.3c0-4.1-1.6-8-4.5-10.9s-6.8-4.5-10.9-4.5L268.4,224.7z M283.3,255.5l-14.9,0
c-1.7,0-3.1-1.4-3.1-3.1l0-12.3c0-1.7,1.4-3.1,3.1-3.1l67.3,0c1.7,0,3.1,1.4,3.1,3.1v12.3c0,1.7-1.4,3.1-3.1,3.1l-15.4,0l42.2,98.3
c0.8,1.9,0.6,4.1-0.5,5.8c-0.3,0.4-0.6,0.8-0.9,1.1c-1.1,1.1-2.6,1.7-4.2,1.7L246.6,363c-2,0-3.9-1-5.1-2.7
c-1.1-1.7-1.4-3.8-0.6-5.7L283.3,255.5z" stroke-width="1" />
<g id="maskedLiquid" mask="url(#liquidMask)">
<path id="tubeLiquid" fill="#74ccf4" d="M246.6,358.9l110.2-0.6c0.6,0,1.1-0.2,1.5-0.6c0.1-0.1,0.2-0.3,0.3-0.4
c0.4-0.6,0.5-1.4,0.2-2c0,0-12.3-28.7-17.9-41.9c-28.6,6.6-55.4-3.9-78.1,0.1c-9,21-18.2,42.5-18.2,42.5c-0.2,0.7-0.2,1.4,0.2,2
C245.2,358.6,245.9,358.9,246.6,358.9z" />
</g>
</g>
<g id="waterLevel">
<text x="380" y="340" font-size="24" fill="#555">Low</text>
</g>
</svg>
我可以读取值，但不知道如何更新使用复杂路径的水位
答案 0 :(得分：1)
这是SVG的简化版本，具有可调节的水位。
// 100 - full
// 75 - average
// 50 - half
// 25 - Low
// 0 - Empty
document.getElementsByName('water-level')[0].addEventListener('change', updateWaterLevel);
function updateWaterLevel() {
//console.log('e', this.value);
// Top of bottle/liquid is at y=225. Bottom is at y=375.
// Liquid starts in the "full" position.
// So for water level 100, we move the liquid down 0.
// For water level 0, we move the liquid down 150 (375 - 225).
var fractionFull = this.value / 100;
var dy = (1 - fractionFull) * 150;
document.getElementById("tubeLiquid").setAttribute("transform", "translate(0," + dy +")");
}svg {
width: 500px;
}<input type="number" value="" name="water-level"/>
<svg viewBox="0 0 600 600" >
<defs>
<mask id="bottleMask">
<path fill="#FFFFFF" d="M 275,225 L 225,375 L 375,375 L 325,225 Z" />
</mask>
</defs>
<g id="maskedLiquid" mask="url(#bottleMask)">
<path id="tubeLiquid" fill="#74ccf4" d="M 225,225 Q 262,220, 300,225 Q 337,230, 375,225 L 375,375 L 225,375 Z" />
</g>
<path id="bottleShape" d="M 275,225 L 225,375 L 375,375 L 325,225 Z" fill="none" stroke="#444444" stroke-width="10"/>
<g id="waterLevel">
<text x="380" y="340" font-size="24" fill="#555">Low</text>
</g>
</svg>