调整CSS坐标后水位不贴合容器，需实现指定梯度的水位显示方案

安全阿岳

2026-7-18

解决水位贴合容器管道及梯度效果实现问题

问题根源

外部CSS中定义的clip-path与SVG内部的mask/clipPath冲突，导致图片显示异常，同时破坏液体的容器贴合效果。
JS中位移计算的基准值错误，未匹配SVG中液体区域的实际高度，导致水位无法准确对应0-100%的梯度要求。

修正代码

HTML（优化属性兼容性，结构不变）

<input type="number" value="" name="water-level" />
<div class="item">
    <svg viewBox="0 0 300 300">
      <defs>
        <mask id="bottleMask" fill="white">
          <path d="M0,0h300v300H0V0z M89,68h122v147H89V68z" />
        </mask>
        <clipPath id="liquidClip">
          <path d="M89,68h122v147H89V68z" />
        </clipPath>
      </defs>
      <image width="300" href="https://i.ibb.co/HGFQYTj/bottle.png" />
      <path id="tubeLiquid" fill="#74ccf4" d="M0,0h300v300H0V0z" clip-path="url(#liquidClip)" mask="url(#bottleMask)" />
    </svg>
  </div>

CSS（移除冲突的clip-path规则）

.item {
    width: 150px;
    height: 150px;
}

#tubeLiquid {
    background-color: #74ccf4;
}

#bottleMask{
    background-color: #FFFFFF;
}

JS（修正位移计算逻辑）

document.getElementsByName('water-level')[0].addEventListener('change', updateWaterLevel);

function updateWaterLevel() {
  const fractionFull = this.value / 100;
  // 液体区域高度为147，空水位时下移147px，满水位时不下移
  const dy = (1 - fractionFull) * 147;
  document.getElementById("tubeLiquid").setAttribute("transform", `translate(0, ${dy})`);
}