如何在 HERE 地图 js 中将动画添加到 svg 图标标记中？

Question

我将自定义 svg 图标添加到地图

<svg class="point-icon-animation" 
    ... ommited 
</svg>

var marker = new H.map.Marker({ lat: point.coords.lat, lng: point.coords.lng }, {
          icon: new H.map.Icon(this.svgMarkup)
        });

然后在 css 文件中添加应该制作动画的样式

.point-icon-animation {
  -webkit-animation: location-bounce .5s linear infinite both;
  animation: location-bounce .5s linear infinite both;
}

@-webkit-keyframes location-bounce {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@keyframes location-bounce {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

但是我的 svg 图标看不到 css 配置，如何让它看到？

Answer 1

您需要将 svg 添加为 DomIcon 对象。检查此 page

上带有 SVG 内容示例的标记

如何在 HERE 地图 js 中将动画添加到 svg 图标标记中？

How to add animations into svg icon markers in HERE maps js?

here-api