javascript - OpenLayers SVG 在 Chrome 中动画，但在 FIrefox 中不动画

Question

我有一个 SVG，当我的网站在 Chrome 中加载时，它会正确显示动画，但在 Firefox 中仅绘制到动画序列的第一步。它以 ol.style.Icon 格式加载，其方法似乎经过了充分测试。

我几乎排除了语法问题，因为我可以毫无问题地将 SVG 直接加载到 Firefox 中。

我使用通过 setInterval 设置的 map.render 函数让动画持续触发。

对我来说唯一的线索是 date:image/svg+xml 显示在 Chrome 开发者工具的“网络”选项卡中，但在火狐网络配置文件。

有什么想法吗？这已经困扰我好几个星期了。示例代码如下。谢谢!

 var svgComment = '<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" viewPort="0 0 60 60" class="svgClass">'
    + '<circle cx="30" cy="30" r="10" stroke="rgb(0, 191, 255)" stroke-width="1" fill="none" opacity="0.8">'
    + '<animate attributeType="CSS" attributeName="stroke-width" from="1" to="30" dur="0.5s" begin="0s" repeatCount="indefinite" />'
    + '<animate attributeType="CSS" attributeName="opacity" from="0.8" to="0.2" dur="0.5s" begin="0s" repeatCount="indefinite" />'
    + '</circle>'
    + '<circle cx="30" cy="30" r="10" fill="rgba(0,0,0,0.8)">'
    + '</circle>'
    + '</svg>';

 var commentStyle =  new ol.style.Style({
    image: new ol.style.Icon({
      src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgComment)
    })
  });

  var commentVector = new ol.layer.Vector({
    name: 'Comments',
    source: commentSource,
    style: commentStyle
  });

Answer 1

我的 svg 无法在 Firefox 或 Chrome 中使用 ol.style.Icon 进行动画处理。我尝试了叠加并成功:

var marker = new ol.Overlay({
    //position: ppos,
     positioning: 'center-center',
     element: document.getElementById('geolocate-mark'),
     stopEvent: false
});
map.addOverlay(marker); 

然后，当您知道将其放在哪里时:

marker.setPosition(geolocation.getPosition());

其中 geolocation 是 my ol.Geolocation 对象，这是另一个主题，但它包含所需的坐标。

和地理定位标记 =

<div style="display: none;"><div id="geolocate-mark">
 <img src="/whatever/geolocation-marker.svg"</img></div></div>