不拉伸SVG宽度前提下调整高度 实现圆柱容器液体变色及容量调整

问题1：JS修改fill不生效的解决 #

失效原因是你CSS中.liquid svg *规则的!important优先级配置和SVG元素的样式解析逻辑冲突，改用CSS变量控制颜色即可解决，同时代码可维护性更高：

1. 把CSS中液体填充规则改成变量形式：

.liquid svg * {
  fill: var(--liquid-color, red) !important;
}

2. 修改changeCol方法直接更新CSS变量：

function changeCol(col) {
  document.querySelector('.liquid svg').style.setProperty('--liquid-color', col);
}

问题2：液体高度无变形调整的实现 #

不用修改SVG尺寸或缩放，直接动态更新液体路径和顶面椭圆的坐标即可，完全不会出现拉伸变形，实现逻辑如下：

1. 先预设容器最大容量，示例设为500ml，可根据你的实际需求修改
2. 按输入容量计算对应液面高度，同步更新path的d属性和ellipse的cy属性

完整的changeHeight实现代码：

// 可自行修改最大容量值
const MAX_VOLUME = 500;
// SVG内固定坐标参数，不要修改
const MIN_TOP_Y = 28;
const MAX_TOP_Y = 297.25;

function changeHeight(vol) {
  // 输入值校验
  vol = Number(vol);
  if(isNaN(vol) || vol < 0) vol = 0;
  if(vol > MAX_VOLUME) vol = MAX_VOLUME;
  
  // 计算当前液面顶部Y坐标
  const ratio = vol / MAX_VOLUME;
  const currentY = MAX_TOP_Y - (MAX_TOP_Y - MIN_TOP_Y) * ratio;
  
  // 更新液体路径
  const liquidPath = document.querySelector('#Layer_1 path');
  liquidPath.setAttribute('d', `M216.66,${currentY}V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V${currentY}C0,${currentY + 15.46},48.5,${currentY + 28},108.33,${currentY + 28}S216.66,${currentY + 15.46},216.66,${currentY}Z`);
  
  // 更新液面顶部椭圆位置
  const topEllipse = document.querySelector('#Layer_1 ellipse');
  topEllipse.setAttribute('cy', currentY);
}

修改完成后两个功能都可以正常运行，SVG宽度固定不会变形，液体颜色可任意切换。

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