求助：Bing Map中SVG脉冲动画Pushpin无法生效的解决方案

问题原因 #

当使用icon属性加载外部SVG文件作为Pushpin时，Bing Maps会将SVG栅格化为静态位图，导致SVG内部的<animate>元素无法触发动画效果。

解决方案 #

方案1：使用内联SVG字符串替代外部文件 #

直接将SVG代码作为字符串传入icon属性，避免控件将其转换为静态位图：

// 定义内联SVG字符串
const pulseSvg = `
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" fill="red" r="10" stroke="red" stroke-width="2">
    <animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/>
  </circle>
  <circle cx="20" cy="20" fill="red" r="10"/>
</svg>
`;

// 创建带动画的Pushpin
return new Microsoft.Maps.Pushpin(location, {
  icon: pulseSvg,
  title: "name",
  anchor: new Microsoft.Maps.Point(20, 20) // 对应SVG viewBox中心
});

方案2：使用HTML+CSS动画实现脉冲效果（更可靠） #

通过htmlContent属性自定义Pushpin的HTML结构，结合CSS动画实现脉冲效果，兼容性更好：

1. 先添加CSS样式：

.pulse-pin-container {
  position: relative;
  width: 20px;
  height: 20px;
}
.pulse-pin-center {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
  z-index: 2;
}
.pulse-pin-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid red;
  z-index: 1;
  animation: pulse-animation 1.5s infinite ease-out;
}
@keyframes pulse-animation {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

2. 创建Pushpin：

return new Microsoft.Maps.Pushpin(location, {
  htmlContent: `
    <div class="pulse-pin-container">
      <div class="pulse-pin-center"></div>
      <div class="pulse-pin-ring"></div>
    </div>
  `,
  title: "name",
  anchor: new Microsoft.Maps.Point(10, 10) // 容器宽高20px，中心坐标为10,10
});

注意事项 #

• 内联SVG需要确保格式正确，引号转义无误；
• 使用HTML+CSS方案时，需确保样式已正确加载到页面中；
• 调整anchor属性值时，要与自定义元素的中心位置匹配，避免Pushpin偏移。

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