我正在尝试在SVG中使用OpenLayers地图，因为我希望SVG元素出现在地图的顶部/前面。 我基于 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 而不是映射，则排序将按预期工作。 只有当OpenLayers贴图嵌入到外来对象中时，它才会出现在其他一切之上，尽管SVG元素的顺序。
我想知道是否有人知道如何使地图在 SVG 元素中正确排序？
我在 Windows 76.0.3809.132(官方版本((64 位(上使用 Chrome 10。
这并没有回答这个问题，而是努力使代码可运行。它更好地展示了问题。
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>