OpenLayers 如何给 SVG 图标上色

Question

我一直在关注 OpenLayers 网站上的 Icon Colors 示例：http://openlayers.org/en/latest/examples/icon-color.html?q=color。

当我使用 png 和 jpg 图像时，这对我很有效，但当我切换到使用 svg 图像时，颜色根本没有改变。没有错误出现，颜色就是不会改变。

这里是代码片段，其中发生颜色更改：

    /*set the colour*/
    var style = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0.5],
            src : 'img/icons/example.svg',
            color: '#8959A8'
        }))
    }); 

任何建议都将不胜感激！

- Charlie K

---

将整个代码发布在 Plunckr 上。我亲自检查它对 SVG 可以工作。还有一件事，图片是否已经加载？ - Sumanth Shastry

嗨@Sumanth，谢谢您的回复。我已经缩小了问题范围到SVG本身。例如，这个SVG可以工作：'<?xml version="1.0" encoding="utf-8"?> <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle fill="#FFFFFF" cx="60" cy="60" r="60"/> </svg>'但是我有一个包含'<path fill="#191817" d="M305.1,433.4h-3.8c0.5,0.2,1.1,0.2,1.9,0.2C304,433.7,304.6,433.6,305.1,433.4z"/>'等内容的SVG无法工作。 - Charlie K

Answer 1

显然，你的SVG中fill属性需要为白色（#fff）。文档没有提到这一点，但我的结论是任何白色（#fff）都会与传递给color属性的值彩色化，而不管图像的类型如何。

- ClemRz

---

文档现在提到颜色会给你的原始标记添加一个“色调”。https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html我认为这样做是为了使其也适用于PNG、JPEG等格式。我还没有找到一种方法来保持SVG的一部分为白色并改变其余部分的颜色。 - mattGreenfield