的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圖像的

回答

相關問題