Svg Bildmaske Schnitt oben und unten

Question

ich Bilder schaffen muß mit dieser Form: http://imgh.us/image-mask_1.svg

Zuerst versuche ich mit CSS-Maske, aber das Problem war die Unterstützung von Browsern. Also springe ich zu Svg Image mit Maske hinein.

Ich habe ein Problem mit SVG-Bild, wo oberen und unteren Teil der Maske abgeschnitten ist.

Ich habe einen codepen erstellt, das Problem zu zeigen:

<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 

Dank Lass

Answer 1

Es geschieht, weil das maskierte Bild falsches Breite/Höhe-Verhältnis aufweist. Das Originalbild ist 1024 x 682. Das Verhältnis ist 1.71788413. Also, wenn Sie Höhe 397px haben wollen, sollte die Breite 397 x 1.71788413 = 596px sein. Sie haben es jedoch auf 551px eingestellt. Das war der Grund für das Schneiden.

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