Javascript SVG图标在OpenLayers中不可见，而另一个SVG工作正常

我在OL6中将SVG图像显示为图标时遇到问题。我在这里看到了所有类似的问题，但都没有帮助。以下是工作图标图像的代码：

const workingIconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

const workingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="91.19" style="fill: #fff"> <g> <g> <path d="M15,0A49,49,0,0,0,0,35L.2,70H29.8L30,35A49,49,0,0,0,15,0Z"/> <rect y="71.19" width="30" height="20"/> </g> </g> </svg>`;

const workingStyle = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + workingSvg,
    scale: 0.3
  })
});

workingIconFeature.setStyle(workingStyle);

const workingiconfication=新ol.功能({
几何体：新的ol.geom.Point（[0,0]）
});
常量工作SVG=``；
const workingStyle=新ol.style.style({
图片：新ol.style.Icon({
不透明度：1，
src:'data:image/svg+xml；utf8，'+workingSvg，
比例：0.3
})
});
工作模式。设置模式（工作模式）；

以下是我无法显示的图标：

const notWorkingIconFeature = new ol.Feature({
  geometry: new ol.geom.Point([20, 20])
});

const notWorkingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="45" height="110" viewBox="0 0 40 102">
          <defs>
              <style>
                  .a{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}.a,.b{opacity:0.7;}.b{fill:#fff;}.c{fill:#031120;}
              </style>
          </defs>
          <line class="a" x1="20" y1="12" x2="20" y2="62" />
          <circle class="b" cx="20" cy="6" r="6" />
          <circle class="c" cx="20" cy="6" r="5" />
          <circle class="b" cx="20" cy="82" r="20" />
          <circle class="c" cx="20" cy="82" r="15" />
      </svg>`;

const notWorkingStyle = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + notWorkingSvg,
    scale: 0.3
  })
});

workingIconFeature.setStyle(notWorkingStyle);

const notworkingiconfication=新ol.功能({
几何：新的ol.geom.Point（[20,20]）
});
const notWorkingSvg=`
.a{fill:none；stroke:fff；stroke-miterlimit:10；stroke-width:2px；}.a.b{opacity:0.7；}.b{fill:fff；}.c{fill:031120；}
`;
const notWorkingStyle=新ol.style.style({
图片：新ol.style.Icon({
不透明度：1，
src:'data:image/svg+xml；utf8，'+notWorkingSvg，
比例：0.3
})
});
工作模式。设置模式（非工作模式）；

正如您所看到的，宽度和高度属性被添加到“不工作”，但仍然没有效果。 也许你知道什么是问题吗？

你的“工作”风格也不适合我（我看到默认的样式图标）。您需要对svg进行URL编码。您可以使用

转义

代码片段：

const workingiconfication=新ol.功能({
几何：新的ol.geom.Point（[-1000，-1000]）
});
常量工作SVG=``；
const workingStyle=新ol.style.style({
图片：新ol.style.Icon({
不透明度：1，
src:'data:image/svg+xml；utf8，'+escape（workingSvg），
比例：0.3
})
});
工作模式。设置模式（工作模式）；
const notworkingisfectionary=新的ol.功能({
几何：新的ol.geom.Point（[10001000]）
});
const notWorkingSvg=`
.a{fill:none；stroke:f00；stroke-miterlimit:10；stroke-width:2px；}.a.b{opacity:0.7；}.b{fill:f00；}.c{fill:031120；}
`;
const notWorkingStyle=新ol.style.style({
图片：新ol.style.Icon({
不透明度：1，
src:'data:image/svg+xml；utf8，'+escape（notWorkingSvg），
比例：0.3
})
});
不工作的自白。设置样式（不工作样式）；
const vectorSource=新ol.source.Vector({
特征：[工作告白，非工作告白]
});
const vectorLayer=新ol.layer.Vector({
来源：矢量源
});
常数光栅层=新的ol.layer.Tile({
来源：new ol.source.OSM（）
});
常量映射=新ol.map({
图层：[光栅图层，矢量图层]，
目标：document.getElementById（'map'），
视图：新ol.view({
中间：[0,0]，
缩放：12
})
});
html，
身体{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
}
.地图{
身高：100%；
宽度：100%；
}

OpenLayers示例

const workingStyle = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + escape(workingSvg),
    scale: 0.3
  })
});

const notWorkingStyle = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + escape(notWorkingSvg),
    scale: 0.3
  })
});