Изображение в формате 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. The ration is 1.71788413. Итак, если вы хотите иметь высоту 397px, ширина должна быть 397 x 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>