openlayers 中超棒的 svg 图标

Question

我知道以前也有人问过类似的问题，但他们的答案对我没有帮助。 我正在尝试使用 Fontawesome-Icons 作为 Openlayers 地图中的标记，如下所示：

const svg = `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                <path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z"/></svg>
            `;
const svgUrl = 'data:image/svg+xml;charset=utf-8,' + svg;
let measurePointStyle = new ol.style.Style({
    image: new ol.style.Icon({              
        src: svgUrl,
        scale: 1
    }),
    text: new ol.style.Text({
        text: "IO",
        offsetY: 25,
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
        })
    })
});

样式的文本部分正确显示在地图上，但图标却没有。没有错误。 我已经寻找解决方案一个多小时了，但找不到任何有帮助的东西。如果有人能告诉我我在这里做错了什么，我将不胜感激。

Answer 1

您必须替换 all 双引号，因为

src

属性本身包含在双引号中

img { height:160px }

<script>
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
             <path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z"/>
           </svg>`;
document.write(`<img src="data:image/svg+xml;charset=utf-8,${svg}">`);
svg = svg.replaceAll(`"`,`'`);
document.write(`<img src="data:image/svg+xml;charset=utf-8,${svg}">`);
</script>