javascript - 根据值更新水位

Question

我正在尝试了解 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>

我可以读取值，但不知道如何更新使用复杂路径的水位

Answer 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>