如何用JavaScript动态裁剪SVG特定PATH元素实现料仓液位控制

你之前的代码无效是因为SVG的<path>元素没有height属性，它的形状完全由d属性定义的路径数据控制，设置style.height或setAttribute("height")不会改变它的显示，只有fill这类path支持的CSS属性会生效。

下面提供两种可行的解决方案：

方案1：使用裁剪路径（clipPath）通用且无需修改原path #

这种方法通过动态调整裁剪区域的高度，只显示液位path的对应部分，适合大多数场景：

1. 先在你的SVG中添加裁剪路径和裁剪矩形：

<svg>
  <!-- 保留你原有的料仓轮廓、液位path等元素 -->
  <clipPath id="liquidClip">
    <!-- 矩形的x、width要和你的液位path的宽度匹配 -->
    <rect id="clipRect" x="20" y="0" width="60" height="0" />
  </clipPath>
  <!-- 给你的液位path添加clip-path属性 -->
  <g>
    <path id="liquidPath" d="你的原path数据" fill="#feca00" clip-path="url(#liquidClip)" />
  </g>
</svg>

2. 用JavaScript根据百分比调整裁剪矩形：

const clipRect = document.getElementById('clipRect');
const totalLiquidHeight = 180; // 替换成你SVG中液位区域的实际总高度
const perc_value = 70; // 实际液位百分比，比如70%

// SVG的y轴是向下的，所以要从底部往上计算裁剪区域的位置
const clipHeight = (perc_value / 100) * totalLiquidHeight;
const clipY = totalLiquidHeight - clipHeight; // 裁剪矩形的顶部位置

clipRect.setAttribute('y', clipY);
clipRect.setAttribute('height', clipHeight);

方案2：直接修改path的d属性适合简单形状的液位 #

如果你的液位path是规则形状（比如矩形），可以直接修改d属性里的坐标点：

假设你的液位path原数据是矩形：M20 200 L80 200 L80 20 L20 20 Z（底部y=200，顶部y=20，总高度180），代码如下：

const liquidPath = document.getElementById('liquidPath');
const totalLiquidHeight = 180;
const perc_value = 70;

// 计算新的顶部y坐标
const newTopY = 200 - (perc_value / 100) * totalLiquidHeight;

// 更新path的d属性
liquidPath.setAttribute('d', `M20 200 L80 200 L80 ${newTopY} L20 ${newTopY} Z`);

注意事项 #

• 方案1需要确保裁剪矩形的x、width和你的液位path完全匹配，否则会出现显示错位。
• 方案2需要你先分析清楚path的d属性结构，找到需要修改的坐标点，适合形状简单的液位。

内容的提问来源于stack exchange，提问作者mikeardy