SVG 요소에 포함 된 google maps iframe

svg 요소에 내 Google지도를 추가하려면 어떻게해야합니까? 지도로 svg를 채우고 싶습니다. SVG 요소에 포함 된 google maps iframe

지도

하지만 늘어납니다 그리고 SVG 모양

에서 당신은 iframe의 src에 링크를 삽입해야하는 코드를 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>

감사의

출처

2016-09-28 user3242861

에 오신 것을 환영합니다 SO! 샘플 코드를 제공 할 때는 [최소한의 완전하고 검증 가능한 예제] (http://www.stackoverflow.com/help/mcve)로 작성하십시오 (iframe 예제를 제공하십시오). 나는 당신의 최소한의 질문은 iframe을 마스크하기 위해 svg를 사용할 수 있다는 것을 정확히 이해한다. 맞습니까? – henry

예,이게 전부입니다! Google지도의 API 키 때문에 올바른 iframe이 표시되지 않습니다. – user3242861

차가움. 그게 문제라면 Google지도는별로 중요하지 않으며 작동하는 iframe은 괜찮습니다 – henry

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

출처

2016-09-28 19:01:40 henry

감사합니다. @henry. 이것은 그렇습니다. 그러나 어떻게하면 폭이 100 %이고 높이가 100 % 인 clippath를 넣을 수 있습니까? 그리고 내용을 맞추십시오. 많은 svg 도형을 사용하고 있으며 이미지가 가득 차거나 iframe이있는 svg가있을 때 응답성에 문제가 있습니다. – user3242861

아직 작업 중이라면 https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/, http://bennettfeely.com과 같은 좋은 리소스가있는 것 같습니다./clippy/및 http://codepen.io/maddesigns/full/jJqep – henry

SVG 요소에 포함 된 google maps iframe

답변

관련 문제