如何用小程序实现不规则SVG进度条的动态调整？

// 读取svg文件
const fs = require('fs');
const svg = fs.readFileSync('water_tower.svg', 'utf-8');

// 获取进度
const progress = 50;

// 查找替换高度
const heightRegex = /height="([0-9]+)"/;
const newHeight = progress * 104 / 100;
const heightMatch = svg.match(heightRegex);
if (heightMatch) {
  svg = svg.replace(heightRegex, `height="${newHeight}"`);
}

// 查找替换颜色
const colorRegex = /fill="#([0-9a-f]+)"/;
const colorMatch = svg.match(colorRegex);
let color;
if (colorMatch) {
  if (progress < 20) {
    color = '#FF0000';
  } else {
    color = '#06CB60';
  }
  svg = svg.replace(colorRegex, `fill="${color}"`);
}

// 转换base64
const base64 = Buffer.from(svg).toString('base64');

// 加载到小程序中
wx.createSelectorQuery().select('#my-svg').fields({
  properties: ['src'],
  computedStyle: [],
  context: this
}).exec((res) => {
  this.setData({
    'my-svg-src': `data:image/svg+xml;base64,${base64}`
  })
});