javascript - 是否可以将动画 svg 分配给 google Maps JavaScript API 中的标记符号？

Question

我使用 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>

它工作得很好，但在某些情况下我需要为标记设置动画，因此我创建了以下动画 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" />
<animate href="#my-circle" attributeName="opacity"  values="1;-2" dur="1s" repeatCount="indefinite" /> </g> </svg>

我用与以前相同的方式创建了一个新符号:

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

但是它不起作用，标记没有显示。我怀疑谷歌地图 api 标记不支持这种动画 svgs。有谁知道它是否支持动画 svgs？如果确实如此，您是否有任何迹象表明我做错了什么？

提前谢谢您。

Answer 1

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

var svgNonAnimated = btoa([
  '<?xml version="1.0"?>',
  '<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
  '<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>'
].join('\n'));

var svgAnimated = btoa([
  '<?xml version="1.0"?>',
  '<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
  '<g fill="none" stroke-width="3" transform="translate(11,11)">',
  '<circle id="my-circle" cx="0" cy="0" r="9" stroke="darkorange" fill="seagreen" />',
  '<animate href="#my-circle" attributeName="opacity"  values="1;-2" dur="1s" repeatCount="indefinite" />',
  '</g></svg>'
].join('\n'));


function initMap() {
  var center = new google.maps.LatLng(33.53625, -111.92674);

  var map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 13
  });

  var marker = new google.maps.Marker({
    position: center,
    map: map,
    title: 'Dynamic SVG Marker',
    icon: getIcon(false),
    optimized: false
  });

  var isAnimated = false;
  document.getElementById('toggleAnimation').addEventListener('click', function() {
    isAnimated = !isAnimated;
    marker.setIcon(getIcon(isAnimated));
  });

  function getIcon(animated) {
    return animated ? {
      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)
    };
  }

}

.as-console-wrapper{
  display:none !important;
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>

<div id="map" style="width:400px;height:150px;float:left"></div>
<button id="toggleAnimation" style="float: left;width: 70px;text-align: center;font-size: 11px;">Toggle Animate</button>

这适用于 Chrome 和 Firefox，但在 IE11 中我只能看到 svg 而没有动画......