图像蒙版不使用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没有覆盖图像的右侧部分，它应该在右侧覆盖整个图像高度。

如何实现这一结果？

Answer 1

如果您“修复”图片的大小（width和height），svg的大小，并将polygon的坐标设置为正确坐标，你会得到正确的结果。

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