Question

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

当我尝试在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; }不会剪辑，图片会显示白色背景。

jsfiddle

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

{{1}}

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>

Answer 2

在我的代码中，我有poligon元素而不是polygon

svg clipPath没有剪辑

2 个答案: