SVG 이미지 마스크 컷 상단과 나는이 모양으로 이미지를 만들 필요가

Question

바닥 : http://imgh.us/image-mask_1.svg

먼저 내가 CSS의 마스크를 시도하지만 문제는 브라우저의 지원을했다. 그래서 나는 마스크 안에있는 svg 이미지로 뛰어 넘는다.

마스크 위쪽과 아래쪽 부분이 잘리는 SVG 이미지에 문제가 있습니다.

내가 당신에게 문제를 보여주기 위해 codepen을 만들었습니다

<svg width="551" height="397" viewBox="0 0 551 397"> 
    <defs> 
    <mask id="section_mask"> 
     <image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" /> 
    </mask> 
    </defs> 

    <image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" /> 
</svg> 

http://codepen.io/lasse_head/pen/ObJLKN 

감사 라세

Answer 1

마스크 이미지가 잘못 너비/높이 비율이 때문에이 발생합니다. 원래 이미지는 1024 x 682입니다. 배급은 1.71788413입니다. 따라서 너비가 397px 인 경우 너비는 397x 1.71788413 = 596px 여야합니다. 그러나 551px로 설정했습니다. 커팅의 이유가되었습니다.

<svg width="551" height="397" viewBox="0 0 551 397"> 
    <defs> 
    <mask id="section_mask"> 
     <image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" /> 
    </mask> 
    </defs> 

    <image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" /> 
</svg>