OpenLayersを4のみを示し1/4 SVG画像

Question

の私は、OpenLayersを4.3.3での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から複数のパラメータを試しましたが、違いがないかアイコンが完全に消えます。

Answer 1

<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>

使用この1人の