Question

如何将我的谷歌地图添加到svg元素中？我想用地图填充svg。

地图出现但已拉伸并脱离svg形状

要测试代码，您必须在iframe中插入src链接。

我的代码：

＆＃13;

svg
{
  stroke: red;
}

＆＃13;

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

＆＃13;

感谢＆＃39; S

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>

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

1 个答案: