如果从svg文件中收集，如何在openlayers 4中使用svg图标

问题如下，请使用svg文件格式：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">

    <symbol id="gear" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
         <path fill="#inherit" stroke="#000000" d="..."/>
    </symbol>

    <symbol id="drill" viewBox="0 0 300 300" xml:space="preserve">
         <path style="stroke:none; fill:#000000" d="..."/>
    </symbol>
<svg>

在openlayers中，设置以下内容的样式：

function setStyleIcon(){
                return new ol.style.Style({
                    image: new ol.style.Icon({
                        img:SVG.create('img/iconsSvg.svg#gear'),
                        imgSize:[30,30]
                    })
                });
            }   

当它崩溃时，出现以下错误：CanvasRenderingContext2D.drawImage的参数1无法转换为以下任何参数：HTMLImageElement、HtmlCanvaElement、HTMLVideoElement、ImageBitmap

如何将svg转换为画布我不知道

---

但是我不能把它放在地图上，提前感谢您的帮助

找到了一个解决方案不太好，svg被插入到js文件中并与文本一起使用，有人能派上用场吗：

函数设置样式：

function setStyleSvg(type,color,scale){
            var svg=svgIcon.getSvg([['location',color],[type,'rgb(100,100,100)',true]]);
            var style=new ol.style.Style({
            image: new ol.style.Icon( {
                src:'data:image/svg+xml;utf8,'+svg,
                scale: scale,
                anchor: [0.5, 1],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                })
            });
            return style;
        };

收集svg（颜色需要rgb/rgba格式“用于angularJS”）：

app.factory（'svgIcon'，function（）{
变量大小=[500500]；
var cssClass=“单位”；
var viewBox=“0 2000”；
const closeTag=''；
var insert=''；
功能图标（图标、颜色、标签）{
var-out；
变量偏移=（标签）？-250:0；
开关（图标）{
“卡车”案例：出局+=`
`;
打破
案例“钻取”：out+=“…”；
打破
案例“挖掘机”：out+=“…”；
打破
}
返回；
}
this.setClass=（className）=>{
cssClass=className；
};
this.setViewBox=（set）=>{
viewBox=设置；
};
this.setInsert=（set）=>{
插入=设置；
};
this.getSvg=（arr）=>{/（[[type，color，label]，[type，color，label]…）
试一试{
var svg=`；
对于（变量i=0；i

发现一个解决方案不是很好，svg被插入js文件并与文本一起使用，有人能派上用场吗：

函数设置样式：

function setStyleSvg(type,color,scale){
            var svg=svgIcon.getSvg([['location',color],[type,'rgb(100,100,100)',true]]);
            var style=new ol.style.Style({
            image: new ol.style.Icon( {
                src:'data:image/svg+xml;utf8,'+svg,
                scale: scale,
                anchor: [0.5, 1],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                })
            });
            return style;
        };

收集svg（颜色需要rgb/rgba格式“用于angularJS”）：

app.factory（'svgIcon'，function（）{
变量大小=[500500]；
var cssClass=“单位”；
var viewBox=“0 2000”；
const closeTag=''；
var insert=''；
功能图标（图标、颜色、标签）{
var-out；
变量偏移=（标签）？-250:0；
开关（图标）{
“卡车”案例：出局+=`
`;
打破
案例“钻取”：out+=“…”；
打破
案例“挖掘机”：out+=“…”；
打破
}
返回；
}
this.setClass=（className）=>{
cssClass=className；
};
this.setViewBox=（set）=>{
viewBox=设置；
};
this.setInsert=（set）=>{
插入=设置；
};
this.getSvg=（arr）=>{/（[[type，color，label]，[type，color，label]…）
试一试{
var svg=`；
对于（变量i=0；i

app.factory('svgIcon',function(){
var size=[500,500];
var cssClass="unit";
var viewBox="0 0 2000 2000";
const closeTag='</svg>';
var insert='';

function icons(icon,color,label){
    var out;
    var offset=(label)?-250:0;
    switch(icon){
        case 'truck':out+=`<path viewBox="0 0 1024 538" transform="translate(448,`+(731+offset)+`)" fill="`+color+`" stroke="rgb(0,0,0)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1" d="...."/>
                `;
                break;
        case 'drill':out+=`....`;
                break;
        case 'excavator':out+=`....`;
            break;
    }
    return out;
}

this.setClass=(className)=>{
    cssClass=className;
};

this.setViewBox=(set)=>{
    viewBox=set;
};

this.setInsert=(set)=>{
    insert=set;
};

this.getSvg=(arr)=>{//([[type,color,label],[type,color,label]....])
    try {
        var svg=`<svg width="500" height="500" viewBox="`+viewBox+`" `+insert+` class="`+cssClass+`" version="1.1" xmlns="http://www.w3.org/2000/svg">`;
        for (var i = 0; i < arr.length; i++) {
            svg+=icons(arr[i][0],arr[i][1],arr[i][2]);
        }
        svg+=closeTag;
        return svg;
    } catch (err) {
        console.log('svg not create');
    }
}

return this;});