Встраиваемые карты Google iframe в элементе SVG

Question

Как я могу добавить свои карты Google в элемент svg? Я хочу заполнить svg картой.

карты появляется, но растягивается и из формы SVG

Для 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>