百度地图动态修改svg图片颜色

使用百度地图API创建了一个GroundOverlay覆盖物，并设置了图片地址为'/Images/Map/PGTest.svg'。如果您想要动态修改SVG图片中的部分路径的颜色，可以按照以下步骤进行：

1、在HTML文件中引入一个<svg>元素，将其隐藏或者暂时移出可视区域。

<svg id="mySvg" style="position: absolute; left: -9999px; top: -9999px;"></svg>

2、使用JavaScript读取SVG文件内容并插入到隐藏的<svg>元素中。

var svgUrl = '/Images/Map/PGTest.svg';
fetch(svgUrl)
  .then(response => response.text())
  .then(svgText => {
    var svgElement = document.getElementById('mySvg');
    svgElement.innerHTML = svgText;

    // 执行修改路径颜色的函数
    changePathColor();
  });

3、定义一个函数changePathColor()，用于遍历并修改路径的颜色。

function changePathColor() {
  var svgElement = document.getElementById('mySvg');
  var paths = svgElement.querySelectorAll('path');

  for (var i = 0; i < paths.length; i++) {
    var path = paths[i];
    // 根据需要修改指定路径的颜色
    if (path.getAttribute('id') === 'your-path-id') {
      path.setAttribute('fill', '#ff0000'); // 将路径颜色修改为红色
    }
  }

  // 将修改后的SVG内容重新设置到GroundOverlay的图片地址中
  var svgText = svgElement.innerHTML;
  groundOverlay.setImageURL('data:image/svg+xml;utf8,' +
 encodeURIComponent(svgText));
}

注意，上述代码中的your-path-id是要修改颜色的路径元素的ID。您应该根据实际情况选择正确的路径元素，并在changePathColor()函数中使用适当的条件判断语句来修改路径颜色。

最后，将changePathColor()函数调用放在加载完SVG文件并插入到隐藏的<svg>元素之后的位置，以确保正确的执行顺序。