svg clipPath不会剪辑

我正在尝试创建一个transparent arrow over an imageSVG和clipPath。这里有jsfiddle工作解决方案。svg clipPath不会剪辑

当我尝试在我的div容器中应用此解决方案时，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"> 
 
      <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>

来源

2017-08-31 Matt

在什么UA。并非所有人都支持HTML元素的SVG剪辑。例如Firefox。 –

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

来源

2017-08-31 11:53:34 Matt

我做了两个svg元件中的一个包含该多边形和另一个包含矩形，图像，就像在工作实例。

之后，我复制了实际工作示例中的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>

来源

2017-08-31 11:05:24

svg clipPath不会剪辑

回答

相关问题