Bildmaske arbeitet nicht mit CSS - SVG

Ich versuche eine Bildmaske mit einem SVG zu erstellen;Bildmaske arbeitet nicht mit CSS - SVG

Das ist, was ich jetzt haben;

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>

Aber die SVG deckt nicht den rechten Teil des Bildes, soll es auf der rechten Seite sein, die gesamte Höhe des Bildes abdeckt.

Wie erreiche ich dieses Ergebnis?

Quelle

2017-07-10 J. Doe

Sie haben ein Bild mit einem 'width' von' 400px' und mit einer unbekannten 'Höhe definiert. In der Zwischenzeit haben Sie ein "Polygon" mit Koordinaten definiert, das sich auf eine Zone mit einer "Breite" und einer "Höhe" von "210" zu beziehen scheint. Also musst du die Dimensionen deines Bildes und die Koordinaten deines Polygons "fixieren", damit es funktioniert ... –

@ ADreNaLiNeN-DJ Aber das Polygon erweitert die Höhe des Bildes nicht –

Wenn Sie „fix“ die Größe des Bildes (width und height), die Größe Ihres svg und setzen Sie die Koordinaten Ihres polygon mit richtigen Koordinaten, werden Sie das richtige Ergebnis haben.

Ich habe das Bild durch ein 400x400 Bild ersetzt.

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>

Quelle

2017-07-10 14:16:21

Bildmaske arbeitet nicht mit CSS - SVG

Antwort

Verwandte Themen