SVG要素に埋め込まれたGoogleマップiframe

Question

svg要素にGoogleマップを追加するにはどうすればよいですか？ マップでsvgを埋めたい。

マップはなく、伸びやSVGのうち、あなたはiframe内のsrcのリンクを挿入する必要があるコードをTESTEするに

を形作る表示されます。

マイコード：

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>

感謝の

Answer 1

ここ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>