javascript - 用图像 mask 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

您可以使用路径剪辑图像，方法是先创建路径，然后添加 <image>元素与 clip-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>