1

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <title>Map</title>

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            var map;
            function initialize() {
                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body style="background-color: #eee">
        <svg id="svg-container" width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <clipPath id="cut-off">
                <polygon points="100,50 300,75 400,25 500,150 690,180 690,240 480,380 510,410 560,410 460,490 410,420 450,380 350,360 280,430 240,430 290,340 220,250 110,260 10,230 110,110" />
            </clipPath>

            <polygon points="100,50 300,75 400,25 500,150 690,180 690,240 480,380 510,410 560,410 460,490 410,420 450,380 350,360 280,430 240,430 290,340 220,250 110,260 10,230 110,110" stroke="black" stroke-width="3" fill="white" />

            <foreignobject x="0" y="0" width="700" height="500" clip-path="url(#cut-off)" >
                <body xmlns="http://www.w3.org/1999/xhtml">
                    <div id="map-canvas" style="width: 500px; height: 500px;"></div>
                </body>
            </foreignObject>
        </svg>

    </body>
</html>

它必须削减谷歌地图，但它只适用于火狐。例如，在 Opera 中，地图位于 SVG 路径之上。如果您知道如何为其他浏览器解决此问题，请告诉我。谢谢。

4

0 回答 0