html - svg clipPath 不剪辑

Question

我正在尝试创建一个 transparent arrow over an image通过 SVG 和 clipPath。这是 jsfiddle与工作解决方案。

当我尝试在我的 div 容器中应用此解决方案时，clipPath 不剪辑并且图像具有白色背景。

jsfiddle

.poi-wrapper{
  display: flex;
  background: white;
}

.background-img{
  width: 110px;
  height: 110px;
}

.svg-background, .svg-image {
    clip-path: url(#clip-triangle);
}

svg.poi-image {
    position: absolute;
    height: 110px;
    width: 110px;
}

.intro-content{
  vertical-align: top;
  padding-left: 10px;
  padding-right: 5px;
  background: white;
  height: 100px;
}

<div class="label-wrapper" style="position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; color: white; width: 809px; left: 112px;">
   <div id="poi-0" class="poi-wrapper poi-intro" style="height: 100px; position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; background: white; color: black;">
      <div class="background-img">
         <svg class="poi-image">
            <defs>
               <clipPath id="clip-triangle">
                  <poligon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"></poligon>
               </clipPath>
            </defs>
            <rect class="svg-background" width="110px" height="110px" clip-path="url(#clip-triangle)"></rect>
            <image class="svg-image" width="110px" height="110px" clip-path="url(#clip-triangle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
         </svg>
      </div>
      <div class="intro-content">
         <span class="poi-header">One step away</span><span class="poi-subheading">1 hour and 28 minutes</span>
         <ul class="poi-details">
            <li>3</li>
            <li>4</li>
         </ul>
      </div>
   </div>
</div>

Answer 1

我制作了两个 svg 元素，一个包含多边形，另一个包含 rect,image，就像在工作示例中一样。

之后，我从实际工作示例中复制了 clipPath 代码，现在它可以工作了。

检查下面的例子

.poi-wrapper {
  display: flex;
  background: white;
}

.background-img {
  width: 110px;
  height: 110px;
}

.svg-background,
.svg-image {
  clip-path: url(#clip-triangle);
}

svg.poi-image {
  position: absolute;
  height: 110px;
  width: 110px;
}

.intro-content {
  vertical-align: top;
  padding-left: 10px;
  padding-right: 5px;
  background: white;
  height: 100px;
}

<div class="label-wrapper" style="position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; color: white; width: 809px; left: 112px;">
  <div id="poi-0" class="poi-wrapper poi-intro" style="height: 100px; position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; background: white; color: black;">
    <div class="background-img">
      <svg class="poi-image">
        <rect class="svg-background" width="110px" height="110px"></rect>
        <image class="svg-image" width="110px" height="110px"></image>
      </svg>
    </div>
    <svg id="svg-defs">
      <defs>
          <clipPath id="clip-triangle">
              <polygon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"/>
          </clipPath>
      </defs>
    </svg>
  </div>
</div>