正如标题所说，我有一个 svg 对象，我希望该对象包含一个 Google map 实例。我试图以与通常使用 div 或简单元素相同的方式来执行此操作，使用 Javascript 和 getElementByID并将 map 放在元素内。然而，这似乎在这里不起作用。我做了很多搜索，但由于谷歌使用 svg 作为自定义图标并覆盖所有响应都与此相关。关于将 id="map_canvas 放在哪里，我主要尝试了不同的方法但没有任何效果。
我的 HTML 以 svg 作为对象:
<div class="row map">
<div class="span12">
<object type="image/svg+xml" id="map_canvas" data="assets/map/MA_map.svg"></object>
</div>
</div>
我的 JavaScript(目前位于 <head> 标签中，但我想将其移至 .js 文档):
<script>
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
最后这就是我的 svg文件看起来像(在 Illustrator 中创建):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="map_canvas"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-79.892 94.942 960 599.864"
enable-background="new -79.892 94.942 960 599.864"
xml:space="preserve">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<path
id="map_canvas"
style="filter:url(#dropshadow)"
<path //lots of lines of code for the path />
</svg>
最佳答案
您可以尝试的可能解决方案:
使用 SVG
<foreignObject>用<clipPath>或<mask>.不过，我不确定它的效果如何。使用 CSS 掩码 ( http://caniuse.com/#feat=css-masks )。
创建 map
Polygon与背景颜色相同，大小与 map 相同，并且有一个形状与面具形状相同的孔。用
<img>覆盖 map (例如 PNG)与背景具有相同的颜色或纹理，并且有一个与您的面具形状相同的孔。
关于javascript - 使用 svg 对象作为谷歌地图的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26064490/