前端 不规则进度条，求好的思路？-灵析社区
饼干爱折腾 这是一个水塔的svg，需求： 水面跟随进度上升下降 进度低于20时变红色，其余进度变绿色 整体尺寸不是固定的，跟随父布局大小 思路1：目前我的思路是根据进度，切10张水塔图，根据进度动态显示。但这增加包体积，感觉也有点粗暴。 思路2：用两张图上下放置，上面的水塔用clip-path根据进度切，但好像只能且固定大小，因为svg的path好像是固定的 目前没有更好的解决思路，各位大佬怎么看？
PunkMaccccc感谢大家的解答，忘了说是小程序，小程序中稍微麻烦些，需要读取svg文件（需要用binary方式读取，不然iOS不显示），然后查找替换高度和颜色部位的值，再转为base64加载到image标签中。其实如果在web端，直接用变量控制即可。svg代码见文末。
大致效果：
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/19b26323be514486694c16528f74ff29.png
动态高度的关键在于，查找并修改“蒙版”的高度，即下面的height="104"，通过js控制变量即可实现动态高度。
至于修改颜色，查找fill="#06CB60"，然后改成需要的颜色。
水塔svg代码。