的OpenLayers 4只显示了1/4 SVG图像的

我想在4.3.3的OpenLayers标记与SVG图标坐标：的OpenLayers 4只显示了1/4 SVG图像的

import ControllerRecordIcon from '../icons/entypo/controller-record.svg'; 

vector.setStyle(new Style({ 
    image: new IconStyle({ 
    scale: 0.5, 
    src: ControllerRecordIcon 
    }) 
})); 

map.addLayer(vector);

图标从Entypo包，这是代码：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> 
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/> 
</svg>

您可以在附加图像中看到问题。只有左上角的四分之一图标可见，并且不以坐标为中心（红点标记坐标）。缩放不起作用，图标变小，但仍然只显示图像的1/4并且不居中。

我尝试了Icon API的多个参数，但它们没有任何区别，或者图标完全消失。

来源

2017-09-25 Patryk

<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve"> 
 
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/> 
 
</svg>

使用这一个

来源

2017-09-25 10:03:16

谢谢，Chandu！现在我可以正确地看到图标。另一个问题出现了 - 它现在不会保持在坐标上，而是与zoom一起移动：[视频附件]（https://monosnap.com/file/mi8Xs1jFzSxTh3RfWUGsRjsIa4p4Jr）这是因为Openlayers Feature/Icon的配置不正确其他？ – Patryk

好吧，我解决了 - entypo图标是20x20px，将您的代码更改为'width = '20'height ='20''的技巧 – Patryk

的OpenLayers 4只显示了1/4 SVG图像的

回答

相关问题