OpenLayers图标中svg显示不正确[重复]

Question

请告诉我OpenLayers中的图标如何使用svg？svg应该有什么结构？

我们在使用svg时遇到了几个问题，并准备了一个示例：

>

使用“颜色”属性（以绿色微笑和红色微笑为例）无法正确更改图像的颜色

如果删除指向标准“xmlns=”http://www.w3.org/2000/svg“的链接（例如黄色微笑），则不会显示图像。为什么它不起作用？

感谢您的回答！

Answer 1

如ol/style/Icon文档中所述，color属性为图标添加“淡色”。这样做是为了添加对jpg和png图标的支持。这意味着，颜色混合到图标颜色中。

在你的例子中，因为所有的路都是黑色的-

这就是新图标的样子：

    let greenIcon =
  '<svg width="148" height="117" viewBox="0 0 148 117" fill="none" xmlns="http://www.w3.org/2000/svg">' +
  '<rect width="148" height="117"/>' +
  '<path d="M86.5833 55.833C90.0351 55.833 92.8333 53.0348 92.8333 49.583C92.8333 46.1312 90.0351 43.333 86.5833 43.333C83.1316 43.333 80.3333 46.1312 80.3333 49.583C80.3333 53.0348 83.1316 55.833 86.5833 55.833Z" fill="white"/>' +
  '<path d="M57.4167 55.833C60.8685 55.833 63.6667 53.0348 63.6667 49.583C63.6667 46.1312 60.8685 43.333 57.4167 43.333C53.9649 43.333 51.1667 46.1312 51.1667 49.583C51.1667 53.0348 53.9649 55.833 57.4167 55.833Z" fill="white"/>' +
  '<path d="M72 76.6663C65.8333 76.6663 60.5417 73.2913 57.625 68.333H50.6667C54 76.8747 62.2917 82.9163 72 82.9163C81.7083 82.9163 90 76.8747 93.3334 68.333H86.375C83.5 73.2913 78.1667 76.6663 72 76.6663ZM71.9583 18.333C48.9583 18.333 30.3333 36.9997 30.3333 59.9997C30.3333 82.9997 48.9583 101.666 71.9583 101.666C95 101.666 113.667 82.9997 113.667 59.9997C113.667 36.9997 95 18.333 71.9583 18.333ZM72 93.333C53.5833 93.333 38.6667 78.4163 38.6667 59.9997C38.6667 41.583 53.5833 26.6663 72 26.6663C90.4167 26.6663 105.333 41.583 105.333 59.9997C105.333 78.4163 90.4167 93.333 72 93.333Z" fill="white"/>' +
  "</svg>";