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の場合、幅は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>