Openlayers 4仅显示SVG图像的1/4

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>

使用这个