Question

是否可以在SVG标签内绘制地图？这可能意味着必须只有SVG版本的地图没有div。

Answer 1

您可以使用foreignObject element将HTML嵌入到SVG中，这对Leaflet非常有用：

<svg>
    <foreignobject x="46" y="22" width="200" height="200">
        <div id='map'></div>
    </foreignobject>
</svg>

// setup your map as usual
var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

和演示

var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

html, body {
  height: 100%;
  margin: 0;
}
#svg {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
   


<svg>
    <foreignobject x="46" y="22" width="200" height="200">
        <div id='map'></div>
    </foreignobject>
</svg>

在SVG标记内使用leaflet.js

1 个答案: