【发布时间】：2021-08-28 14:45:33
【问题描述】：
我有 3 个不同的 SVG，它们都显示一个标记。然而，其中只有一个适用于 Openlayers 图标。在这个例子中，只有 svg1 在地图上正确显示了标记。使用 IMG 元素时，所有三个 SVG 都会正确显示。什么决定了 svg 是否可以由 openlayers 显示，或者我必须更改什么才能使其工作？
var svg1 = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
var svg2 = '<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" enable-background="new 0 0 30 30" version="1.1"><g><title>Layer 1</title><path id="svg_1" d="m22.906,10.438c0,4.367 -6.281,14.312 -7.906,17.031c-1.719,-2.75 -7.906,-12.665 -7.906,-17.031s3.54,-7.907 7.906,-7.907s7.906,3.54 7.906,7.907z" fill="#156BB1"/></g></svg>';
var svg3 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#156BB1" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>';
var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + encodeURIComponent(svg1);
var style = new Style({
image: new Icon({
img: mysvg,
imgSize: [30, 30]
})
});
【问题讨论】：
-
svg1 和 svg2 的区别似乎是 svg 参数。更改顺序可以显示 svg2。这意味着在 Openlayers 中使用 SVG 时，顺序很重要。 svg3 对我来说仍然有意义。我尝试将
元素复制到以前的工作 svg 中，这使它停止工作。 -
svg1 和 svg2 在 Chrome 中为我工作。对于 svg3，我需要
imgSize: [384 * 4, 512 * 4], scale: 0.02才能看到与其他类似的东西，所以也许其中的 viewBox 有问题？
标签： svg icons openlayers