Eingebettete Google Maps iframe in SVG-Element

Question

Wie kann ich meine Google Maps in ein Svg-Element hinzufügen? Ich möchte Svg mit Karte füllen.

Die Karte wird aber gestreckt und aus der svg Form

den Code Sie einen src Link in iframe einfügen müssen, um testete.

Mein Code:

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>

Dankten

Answer 1

Hier ist eine Lösung, die auf Yoksel der "Masking video with SVG Clippath". Das Platzhaltervideo dient nur dazu, einen funktionierenden öffentlichen Iframe bereitzustellen. Um diese Lösung zu verwenden, müssen Sie die <path> neu definieren, um die richtige Größe zu haben (wenn Sie Glück haben, können Sie nur Prozente wie Yoksel verwenden).

(@yoksel sind Sie die gleiche 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>