イメージマスクがCSSで動作しない - SVG

Question

SVGを使用してイメージマスクを作成しようとしています。

これは私が今持っているものです。

body {background:#000;} 
 
    .bg {position:relative;width:400px;} 
 
    .bg img {width:400px} 
 
    .mask {position:absolute;top:0;right:0;}

<div class="bg"> 
 
      <img src="http://www.telegraph.co.uk/content/dam/Travel/hotels/middle-east/united-arab-emirates/dubai/dukes-dubai-pool-xlarge.jpg"> 
 
      <div class="mask"> 
 
       <svg height="100%" width="100%"><polygon points="200,1 150,210 200,210" style="fill:#fff" /></svg> 
 
      </div> 
 
    </div>

しかし、SVGは、画像の右部分を覆っていない、それは画像の全体の高さをカバー右側にあるべきです。

この結果はどのように達成できますか？あなたは、（widthとheight）あなたのイメージのサイズを「修正」あなたsvgの大きさと、あなたが右の座標を使用してpolygonの座標を置く場合は、正しい結果を持っています

Answer 1

。

イメージを400x400イメージに置き換えました。

body {background:#000;} 
 
.bg {position:relative;width:400px;} 
 
.bg img {width:400px;height:400px} 
 
.mask {position:absolute;top:0;right:0;}

<div class="bg"> 
 
      <img src="http://vignette2.wikia.nocookie.net/wiiu/images/5/5e/New-Super-Mario-Bros-Art-21-400x400.jpg/revision/latest?cb=20121029024830"> 
 
      <div class="mask"> 
 
       <svg height="400px" width="400px"><polygon points="400,0 300,400 400,400" style="fill:#fff" /></svg> 
 
      </div> 
 
    </div>