Javascript OpenLayers 3-如何将SVG内联绘制为功能点中的图标

我想在地图上画一个SVG图标，它是为每个功能定义的显式内联。但我不知道怎么做。我无法使用覆盖，因为我需要群集。我试图在样式中设置为图像源，但它不起作用，在地图上我只能看到基本的圆。请参阅下面的代码，在图标中参数为SVG：

historyPositionsSource = new ol.source.Vector({});
historyPositionsClusterSource = new ol.source.Cluster({
    distance: 40,
    source: historyPositionsSource
});
historyPositionsClusters = new ol.layer.Vector({
    source: historyPositionsClusterSource,
});

 map.addToHistoryCluster = function (icon, lon, lat, id, wSize) {
    var DOMURL = window.URL || window.webkitURL || window;
    var pos = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
            size: [24, 24],
            src: DOMURL.createObjectURL(new Blob([icon], {type: 'image/svg+xml;charset=utf-8'}))
        }))
    });
    var feature = new ol.Feature({
        geometry: new ol.geom.Point(pos),
        style: iconStyle,
        device: id,
        type: 'history'
    });        

    historyPositionsSource.addFeature(feature);
};

更新 svg：

相关吗？很遗憾，没有，但谢谢。介意分享一个您使用的svg示例吗？相关吗？很遗憾，没有，但是谢谢。介意分享一个您使用的svg示例吗？

<svg xmlns="http://www.w3.org/2000/svg" class="iconBase" width="22" height="22"><rect style="fill: rgba(51, 153, 102, 1);" x="1.5" y="1.5" width="19" height="19" /><rect style="fill: rgba(0, 0, 0, 1);" x="5" y="5" width="12" height="12" /></svg>