Estoy añadiendo una feature con un estilo con imagen definido como icono cuyo origen es un SVG, sin embargo, el SVG no está siendo animado, aunque el código del SVG así lo indique. Este es mi código:
let svgAnimatedIcon = '<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 512 512" xml:space="preserve"> <g> <path fill="#FFFF00" d="M256,0C167.641,0,96,71.625,96,160c0,24.75,5.625,48.219,15.672,69.125C112.234,230.313,256,512,256,512l142.594-279.375 C409.719,210.844,416,186.156,416,160C416,71.625,344.375,0,256,0z M256,256c-53.016,0-96-43-96-96s42.984-96,96-96 c53,0,96,43,96,96S309,256,256,256z"> <animate attributeName="fill" values="#5f9ea0;#FFFF00;#FFFF00;#5f9ea0" dur="2s" repeatCount="indefinite" /> </path> </g></svg>'
let encodedSVGIcon = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svgAnimatedIcon);
let iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
});
let style = new ol.style.Style({
image: new ol.style.Icon({
opacity: 1,
src: encodedSVGIcon,
scale: 1
})
});
iconFeature.setStyle(style);
let vectorSource = new ol.source.Vector({
features: [iconFeature]
});
let vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 4
})
});
Este es el aspecto que tiene la feature
Y este es el aspecto que debería tener (mismo SVG añadido a un marker de Google Maps):
El código del SVG hace que este tenga una transición de color y en otros sitios se aprecia, como en Google Maps y otras herramientas de visualización de SVGs online. ¿Qué estoy haciendo mal?