圖像蒙版不與CSS一起使用 - SVG

我正在嘗試使用SVG製作像這樣的圖像蒙版;圖像蒙版不與CSS一起使用 - 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不遮擋圖像的右側部分，它應該是在右側覆蓋圖像的整體高度。

我該如何達到這個結果？

來源

2017-07-10 J. Doe

您有400px'的''一和width'具有未知'高度定義的圖像。同時，您定義了一個「多邊形」，其座標似乎指的是「寬度」和「高度」爲「210」的區域。所以，你必須「修復」圖像的尺寸和「多邊形」的座標，以使其工作... –

@ ADreNaLiNe-DJ但是，然後多邊形仍然不會將高度延伸到圖像 –

如果「修復」你的形象（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>

來源

2017-07-10 14:16:21

圖像蒙版不與CSS一起使用 - SVG

回答

相關問題