Question

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

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

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

对我而言，唯一似乎是线索的是date:image/svg+xml显示在Chrome中的开发者工具的“网络”标签中，但在Firefox网络配置文件中无处可寻。

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

 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无法使用ol.style.Icon在Firefox或Chrome中进行动画处理。我成功尝试了Overlay：

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

然后，当您知道将其放置在何处时：

marker.setPosition(geolocation.getPosition());

其中地理定位是我的ol.Geolocation对象，这是另一个主题，但是它包含所需的坐标。

和geolocate-mark =

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

OpenLayers SVG在Chrome中动画，但不是FIrefox

1 个答案: