在 SVG 元素中嵌入谷歌地图 iframe

Question

如何将我的谷歌地图添加到 svg 元素中？ 我想用地图填充 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>

谢谢

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>