OpenLayers 3 - 如何将SVG内联绘制为特征点中的图标

Question

我想在地图上绘制一个特征作为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 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>