嵌入谷歌地圖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元素

回答

相關問題