在OpenLayers中使用SVG图标作为标记

Question

我尝试在Openlayers-3中使用svg图标作为标记。这是我的代码。

var svg = '<?xml version="1.0"?>'
            + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
            + '<circle cx="60" cy="60" r="60"/>'
            + '</svg>';

var style = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                src: 'data:image/svg+xml;base64,' + btoa(svg)
            })
        });

但是我的SVG图像被截断了，如下图所示。（图标应该是一个圆形）

- Alexlionnel Sieyadjeu

Answer 1

这里是一个示例，展示了内联SVG在图标符号化程序中的使用：http://jsfiddle.net/eze84su3/

以下是相关代码:

var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
    + '<circle cx="60" cy="60" r="60"/>'
    + '</svg>';

var style = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + svg,
    scale: 0.3
  })
});

与你的一些不同之处：

• 我为 <svg> 添加了 width 和 height 属性。这可以让浏览器知道最终图像的大小。
• 我添加了一个scale属性来调整图像的大小。
• 我使用了utf8编码而非base64编码（无关紧要）。

- Tim Schaub

---

谢谢您的回答。但是为什么viewBox参数没有起作用呢？ - Alexlionnel Sieyadjeu

这种方法可行，但是因为浏览器对SVG中某些字符（如双引号、换行和空格）存在问题，需要注意两个限制条件。我发现更可靠的方法是先使用window.btoa将SVG转换为Base64格式，然后作为“data:image/svg+xml;base64,”的内容之后跟随着你的Base64编码图像来包含它。 - Husky

Answer 2

对我来说，解决方案是：

const iconMarkerStyle = new ol.style.Icon({
    src: './data/static_images/marker.svg',
    //size: [100, 100],
    offset: [0, 0],
    opacity: 1,
    scale: 0.35,
    //color: [10, 98, 240, 1]
})

然后直接在SVG文件中添加大小参数：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.81 215.81" width="14.5px" height="21.6px">
    <title>Asset 190-SVG</title>
</svg>

- TAG Formación Online

Answer 3

我正在使用SVG图标作为OpenLayers样式中的图像源。

var custstyle = new ol.style.Style({
 image: new ol.style.Icon({
    anchor: [0.5, 50],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: './Icon.svg',
  }),
});

- raghav