面具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>