Question

我一直在修改下面发布的代码一段时间，我似乎无法做我需要做的支持Chrome和Firefox。我的目标是在SVG的整个区域填充图像（覆盖）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用路径剪辑图像，方法是首先创建路径，然后添加<image>元素，并为路径指定clip-path属性。

＆＃13;

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

＆＃13;

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

＆＃13;

使用图像屏蔽SVG

1 个答案: