我想在SVG元素出现在地图顶部/前面的情况下，在SVG中使用OpenLayers地图。我已经基于OpenLayers教程创建了一个简单的测试示例，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Working with Openlayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- Openlayers CSS file-->
<style type="text/css">
#map{
width:100%;
height:600px;
}
</style>
<!--Basic styling for map div,
if height is not defined the div will show up with 0 px height -->
</head>
<body>
<svg width="800" height="500">
<rect width="600" height="300" style="fill:rgb(0,255,255);stroke-width:3;stroke:rgb(0,0,0)" />
<foreignObject height="300" id="_MapPOC.7-foreignObject" width="600" y="100" x="100">
<div id="map">
<!-- Your map will be shown inside this div-->
</div>
</foreignObject>
<rect width="600" height="300" x="200" y="200" style="fill:rgb(255,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<!-- Openlayesr JS fIle -->
<script type="text/javascript" src="map.js" type="text/javascript"></script>
<!-- Our map file -->
</html>
在此示例中，第一个（青色）矩形应该出现在后面，然后地图（外部对象）应该出现在中间，第二个（黄色）矩形应该出现在顶部。
但是，当我查看页面时，地图同时显示在青色和黄色矩形的顶部。
如果将异物的内容更改为某些常规HTML而不是地图，则该排序将按预期工作。尽管SVG元素有序，但只有将OpenLayers映射嵌入到外部对象中时，它才会出现在所有其他对象之上。
我想知道是否有人知道如何使地图在SVG元素中正确显示吗？
我正在Windows 10上使用Chrome版本76.0.3809.132（官方内部版本）（64位）。
最佳答案
这不会回答问题，而是会努力使代码可运行。它更好地说明了问题。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-74.006,40.712]), // Coordinates of New York
zoom: 7 //Initial Zoom Level
})
}); <style type="text/css">
#map{
width:100%;
height:600px;
}
</style><head>
<title>Working with Openlayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
</head>
<body>
<div id="map3">
<!-- Your map will NOT be created inside this div-->
</div>
<svg width="800" height="500">
<rect width="600" height="300" style="fill:rgb(0,255,255);stroke-width:3;stroke:rgb(0,0,0)" />
<foreignObject height="300" id="_MapPOC.7-foreignObject" width="600" y="100" x="100">
<div id="map">
<!-- Your map will be created inside this div-->
</div>
</foreignObject>
<rect width="600" height="300" x="200" y="200" style="fill:rgb(255,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
</body>