user3242861 user3242861 - 1 year ago 188
CSS Question

Embedded google maps iframe in SVG element

How can i add my google maps into an svg element?
I want to fill svg with map.

The map appears but stretched and out of the svg shape

To teste the code you have to insert an src link in iframe.

My code:

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>
<path fill="url(#map)" d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z" />


Answer Source

Here's a solution based on Yoksel's "Masking video with SVG Clippath". The placeholder video is just to provide a working public iframe. To use this solution you'll have to redefine the <path> to have the right sizing (if you're lucky, you'll just be able to use percentages like Yoksel did).

(@yoksel are you the same 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>

  <g clip-path="url(#my-clippath)">
    <foreignObject width="560" x="0" y="0" height="349">
        <iframe width="560" height="349" src="" frameborder="0" allowfullscreen></iframe>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download