如何用JavaScript动态修改Google Maps标记SVG中的计时器值？

我懂你遇到的问题了——你把SVG作为data URI放进Google Maps的标记里，结果想修改里面的计时器文本时，用$('#svg_timer_value')根本找不到元素对吧？这是因为这个SVG没有被解析到当前页面的DOM树中，它只是作为一个图片资源加载的，和你页面里的普通SVG元素不一样，自然没法直接用DOM选择器访问内部节点。

下面给你两种可行的解决办法，你可以根据自己的场景选：

方法一：重新生成Data URI（简单直接） #

这种方法的思路就是每次更新计时器时，重新构建整个SVG字符串，然后把它编码成新的data URI，再更新标记的icon属性。

代码示例：

// 写一个专门更新计时器的函数
function updateMarkerTimer(newTime) {
  // 重新拼接SVG字符串，把新的时间填进去
  const svgContent = `
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/>
      <line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/>
      <circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/>
      <text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">${newTime}</text>
      <circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/>
      <circle cx="10" cy="60" r="5" fill="skyblue"/>
      <text x="8" y="63" fill="#000000" font-size="9">3</text>
    </svg>
  `;
  // 把SVG字符串编码成适合data URI的格式
  const encodedSvg = encodeURIComponent(svgContent);
  // 更新标记的icon
  marker.setIcon({
    anchor: new google.maps.Point(10, 10),
    url: `data:image/svg+xml;utf-8,${encodedSvg}`
  });
}

// 调用示例：把计时器改成00:16:30
updateMarkerTimer("00:16:30");

优缺点：这种方法上手快，不需要额外维护DOM元素，但每次更新都要重新生成整个SVG，适合你的SVG内容不复杂的场景。

方法二：用Blob URL操作SVG DOM（更灵活） #

如果你需要频繁修改SVG里的多个元素，或者想像操作普通HTML元素一样修改SVG内容，可以用这种方法：先在页面里创建一个隐藏的SVG元素，修改它的内容后转成Blob URL，再给标记用。

代码示例：

// 先在页面里创建一个隐藏的SVG元素（用来编辑内容）
const hiddenSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
hiddenSvg.setAttribute("width", "100");
hiddenSvg.setAttribute("height", "100");
hiddenSvg.style.display = "none"; // 隐藏起来不让用户看到
document.body.appendChild(hiddenSvg);

// 初始化SVG的内容
hiddenSvg.innerHTML = `
  <line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/>
  <line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/>
  <circle cx="45" cy="30" r="20" fill="#e9a641" style="stroke:#000; stroke-width:1"/>
  <text id="svg_timer_value" x="29" y="32" fill="#000000" font-size="9" font-weight="bold">00:15:30</text>
  <circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/>
  <circle cx="10" cy="60" r="5" fill="skyblue"/>
  <text x="8" y="63" fill="#000000" font-size="9">3</text>
`;

// 定义更新函数
function updateMarkerTimer(newTime) {
  // 直接操作隐藏SVG里的计时器元素，和操作普通DOM一样！
  const timerElement = hiddenSvg.getElementById("svg_timer_value");
  timerElement.textContent = newTime;

  // 把修改后的SVG转成Blob
  const svgBlob = new Blob([hiddenSvg.outerHTML], { type: "image/svg+xml;charset=utf-8" });
  // 创建Blob URL
  const svgUrl = URL.createObjectURL(svgBlob);

  // 更新标记的icon
  marker.setIcon({
    anchor: new google.maps.Point(10, 10),
    url: svgUrl
  });

  // 注意：如果频繁更新，记得保存上一次的Blob URL，调用URL.revokeObjectURL(oldUrl)清理内存
}

// 初始化标记的时候就用这个方法生成的URL
updateMarkerTimer("00:15:30");

// 之后更新直接调用就行
updateMarkerTimer("00:16:30");

优缺点：可以直接操作SVG的DOM元素，修改内容、样式都很灵活，但需要维护一个隐藏的SVG元素，还要注意清理Blob URL避免内存泄漏。

关键原因再强调一下 #

你之前用$('#svg_timer_value')找不到元素，核心是因为那个SVG是作为data URI加载的，它是图片资源，不是页面DOM的一部分——就像你加载一张外部PNG图，没法直接修改图里的内容一样，SVG作为data URI时也是同理。

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