不规则进度条制作要点
针对所给的SVG水塔图，制作不规则进度条的关键在于：
动态改变水面高度：
通过修改svg中负责“水面”蒙版区域的高度（height属性）即可动态控制水面上升或下降。
动态修改颜色：
查找并修改表示“水”的填充值（fill属性），即可动态更改“水”的颜色。
思路
基于以上要点，可采用以下思路：
将svg代码嵌入小程序中。
读取svg文件的内容（需要二进制读取）。
根据进度百分比，查找并修改“水面”蒙版的高度和“水”的填充值。
将修改后的内容转换为base64字符串，并加载到image标签中。
需要注意的是，在小程序中，直接操作svg变量可能实现不了动态效果。因此，需要通过读取和替换svg文本的方式来实现。
示例代码
其中，fetchSvg()和convertSvgToBase64()分别用于读取和转换svg文件。
const progress = 30; // 进度百分比
let svgText = fetchSvg(); // 读取svg文件内容
svgText = svgText.replace(/height="104"/g, `height="${progress * 104 / 100}"`); // 修改水面蒙版高度
svgText = svgText.replace(/fill="#06CB60"/g, `fill="${progress < 20 ? '#F44336' : '#06CB60'}"`); // 修改水颜色
const base64Img = convertSvgToBase64(svgText); // 将svg转换为base64字符串
image.src = base64Img; // 加载base64字符串到image标签中