是否可以在google Maps JavaScript API中将动画svg指定给标记符号？

我使用SVG创建了一个符号。这是我的象征：

    var symbol = {
    anchor: new google.maps.Point(11, 11),
    url: 'data: image/svg+xml;utf-8, ' + mysvg,
    size : new google.maps.Size(22, 22)
}

我已将其分配给一个标记：

marker.setIcon(symbol);

我的svg如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<g fill="none" stroke-width="3" transform="translate(11,11)">
<circle id="my-circle" cx="0" cy="0" r="9" stroke="darkorange" fill="seagreen" />
 </g> </svg>

我把它放在记号笔上：

marker.setIcon(animatedsymbol);

但它不起作用，没有显示标记。我怀疑谷歌地图api标记不支持这种动画SVG。有人知道它是否支持动画SVG吗？如果是的话，你知道我做错了什么吗

---

提前谢谢。

我想这样做没有问题。检查此代码：

var svgNonAnimated=btoa([
'',
'',
'',
'',
''
].join（'\n'）；
var svgAnimated=btoa([
'',
'',
'',
'',
'',
''
].join（'\n'）；
函数initMap（）{
var center=new google.maps.LatLng（33.53625，-111.92674）；
var map=new google.maps.map（document.getElementById（'map'）{
中心:中心,，
缩放：13
});
var marker=new google.maps.marker({
位置：中，
地图：地图，
标题：“动态SVG标记”，
图标：getIcon（错误），
优化：错误
});
var isAnimated=假；
document.getElementById（'toggleAnimation'）。addEventListener（'click'，function（）{
isAnimated=！isAnimated；
marker.setIcon（getIcon（isAnimated））；
});
函数getIcon（动画）{
返回动画{
url:'data:image/svg+xml；charset=UTF-8；base64'+svgAnimated，
scaledSize:new google.maps.Size（50,50）
} : {
url:'data:image/svg+xml；charset=UTF-8；base64'+svgNonAnimated，
scaledSize:new google.maps.Size（50,50）
};
}
}

。作为控制台包装器{
显示：无！重要；
}

切换动画

我认为这样做没有问题。检查此代码：

var svgNonAnimated=btoa([
'',
'',
'',
'',
''
].join（'\n'）；
var svgAnimated=btoa([
'',
'',
'',
'',
'',
''
].join（'\n'）；
函数initMap（）{
var center=new google.maps.LatLng（33.53625，-111.92674）；
var map=new google.maps.map（document.getElementById（'map'）{
中心:中心,，
缩放：13
});
var marker=new google.maps.marker({
位置：中，
地图：地图，
标题：“动态SVG标记”，
图标：getIcon（错误），
优化：错误
});
var isAnimated=假；
document.getElementById（'toggleAnimation'）。addEventListener（'click'，function（）{
isAnimated=！isAnimated；
marker.setIcon（getIcon（isAnimated））；
});
函数getIcon（动画）{
返回动画{
url:'data:image/svg+xml；charset=UTF-8；base64'+svgAnimated，
scaledSize:new google.maps.Size（50,50）
} : {
url:'data:image/svg+xml；charset=UTF-8；base64'+svgNonAnimated，
scaledSize:new google.maps.Size（50,50）
};
}
}

。作为控制台包装器{
显示：无！重要；
}

切换动画

谢谢。你的代码工作得很好，所以现在我知道这样做没有问题。在我的代码中它仍然不起作用，但我在你的答案中有很多提示，所以我相信我会设法应用它。再次感谢您。@LaiaLinaresOrtells这听起来很棒。我很高兴我的回答对你有帮助。请注意，这段代码是为了在IE11中工作（需要一个变通方法）谢谢。你的代码工作得很好，所以现在我知道这样做没有问题。在我的代码中它仍然不起作用，但我在你的答案中有很多提示，所以我相信我会设法应用它。再次感谢您。@LaiaLinaresOrtells这听起来很棒。我很高兴我的回答对你有帮助。请注意，这段代码是在IE11中工作的（需要解决）

var animatedsymbol = {
    anchor: new google.maps.Point(11, 11),
    url: 'data: image/svg+xml;utf-8, ' + myanimatesvg,
    size : new google.maps.Size(22, 22)
}

marker.setIcon(animatedsymbol);