什么决定了 svg 是否可以被 openlayers 渲染

Question

我有 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]
        })
    });

Answer 1

显然，使用的顺序和参数对于 Openlayers 很重要。我通过使用以下内容作为 svg 包装器使 svg3 工作。

<svg version="1.1" id="Layer_1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
</svg>

删除任何这些参数或更改顺序导致 svg 未显示在地图上。另一个问题是路径值不是逗号分隔的。这对在图像中显示它没有任何问题，但 openlayers 似乎至少需要它才能在图标中使用。

什么决定了 svg 是否可以被 openlayers 渲染

What determines if a svg can be rendered by openlayers

svg

icons

openlayers