嵌入谷歌地图iframe在SVG元素

如何添加我的谷歌地图到一个SVG元素？我想用地图填充svg。嵌入谷歌地图iframe在SVG元素

的地图显示，但拉伸出来的SVG形状

的要泰斯特，你必须插入IFRAME SRC的链接代码。

我的代码：

svg 
 
{ 
 
    stroke: red; 
 
}

<svg viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
    <foreignObject id="map" width="560" height="349"> 
 
    <iframe width="560" height="349" frameborder="0" style="border:0" src="LINK + API_KEY" allowfullscreen></iframe> 
 
    </foreignObject> 
 
    <path fill="url(#map)" d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z" /> 
 
</svg>

感谢的

来源

2016-09-28 user3242861

欢迎SO！提供示例代码时，请使其成为[最小，完整，可验证的示例]（http://www.stackoverflow.com/help/mcve）（所以，给我们一个可用的iframe示例）。我正确理解你最小的问题是可以使用svg来掩盖iframe，是吗？ – henry

是的，就是这样！我没有显示有效的iframe，因为谷歌地图的API密钥。 – user3242861

很酷。如果这是个问题，那么谷歌地图并不重要，任何工作的iframe都可以。 – henry

下面是基于Yoksel的"Masking video with SVG Clippath"的解决方案。占位符视频只是提供一个可用的公共iframe。要使用此解决方案，您必须重新定义<path>才能拥有合适的大小（如果幸运的话，您只能使用Yoksel的百分比）。

（@yoksel你是一样的Yoksel？）

.svg { 
 
    width: 560px; 
 
    height: 349px; 
 
}

<svg class="svg"> 
 
    <clippath id="my-clippath"> 
 
    <path d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z"></path> 
 
    </clippath> 
 

 
    <g clip-path="url(#my-clippath)"> 
 
    <foreignObject width="560" x="0" y="0" height="349"> 
 
     <iframe width="560" height="349" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allowfullscreen></iframe> 
 
    </foreignObject> 
 
    </g> 
 
</svg>

来源

2016-09-28 19:01:40 henry

谢谢@henry。这是它，但我怎么能例如宽度：100％和高度：100％clippath？并适合内容。我使用了很多svg形状，并且在响应时出现问题，当我有svg充满图像或在这种情况下使用iframe时。 – user3242861

如果你仍然在做这件事：看起来像一些很好的资源是https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/，http://bennettfeely.com/clippy /和http://codepen.io/maddesigns/full/jJqep – henry

嵌入谷歌地图iframe在SVG元素

回答

相关问题