OpenLayers中FontAwesome SVG图标作为标记不显示问题求助

你的代码里有三个关键问题导致SVG图标无法显示：

• SVG字符串转义字符冗余：你用模板字符串包裹内容，但仍保留了<、"这类HTML转义字符，这会破坏SVG的结构，导致解析失败。
• 未对SVG字符串做URL编码：直接拼接SVG字符串到data URL后，字符串里的换行、空格等特殊字符会让URL失效，OpenLayers无法加载该资源。
• SVG缺少填充色：FontAwesome导出的SVG路径默认无填充，图标会呈透明状态，即使加载成功也无法看到。

修正后的代码如下：

// 直接编写原生SVG标签，无需转义
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="#000">
    <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>
`;
// 对SVG字符串进行URL编码，确保data URL有效
const svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
let measurePointStyle = new ol.style.Style({
    image: new ol.style.Icon({              
        src: svgUrl,
        scale: 0.1 // 原SVG尺寸过大，缩小比例适配地图显示
    }),
    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
        })
    })
});

额外说明：

• 原SVG的viewBox尺寸为0 0 320 512，直接使用会导致图标过大，因此需要调小scale参数适配地图。
• 若要修改图标颜色，直接修改SVG标签的fill属性值即可。

内容的提问来源于stack exchange，提问作者wubbe