Mask SVG with an image

Question

I have been tinkering around with the code posted below for a while now and I can not seem to do what I need to do with support for Chrome and Firefox. My aim is to have an image fill (cover) the whole area of the SVG.

 .trap-container { position: relative; width: 100%; height: 200px; } .trap-container svg { position: absolute; } .trap-content { display: inline-block; position: relative; top: 10%; height: 80%; width: 100%; bottom: 10%; color: white; } 

 <div class="trap-container"> <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <polygon points="0,0 100,0 100,70 0,100"> </polygon> </svg> <div class="trap-content">Legal </div> </div> 

Answer 1

You can clip an image with a path, by first creating a path and then adding an <image> element with the clip-path attribute assigned to the path.

 .trap-container { position: relative; width: 100%; height: 200px; } .trap-container svg { position: absolute; } .trap-content { display: inline-block; position: relative; top: 10%; height: 80%; width: 100%; bottom: 10%; color: black; } 

 <div class="trap-container"> <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" class="svg-graphic" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <g> <clipPath id="banner-mask"> <polygon points="0,0 100,0 100,70 0,100" /> </clipPath> </g> <a xlink:href="http://www.stackoverflow.com"> <image clip-path="url(#banner-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/WHnTGPB.jpg?1" /> </a> </svg> <div class="trap-content">Legal</div> </div>