svg clipPath不剪辑

Question

我正在尝试通过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> 

Answer 2

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