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

Question

I add custom svg icon to map

<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)
        });

Then in css file I add style which should make an animation

.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);
  }
}

But my svg icon dosen't see that css configuration, how to make it see?

Answer 1

You need to add the svg as a DomIcon object. Check the Marker with SVG content example on this page