面具SVG与图像

Question

我一直在修补下面的代码现在一段时间了，我似乎无法做我需要做的与Chrome和Firefox的支持。我的目标是让图像填充（覆盖）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

可以与路径剪辑的图像，通过首先创建的路径，然后加入与被分配给路径clip-path属性的<image>元件。

.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>