Svg clipPath nicht clip

Question

Ich versuche, eine transparent arrow over an image von SVG und clipPath zu erstellen. Hier ist jsfiddle mit funktionierender Lösung.

Wenn ich versuche, diese Lösung in meinem div Container, clipPath nicht Clip und Bild hat weißen Hintergrund.

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

Auf meinem Code ich habe poligon Element anstelle von polygon

Answer 2

I machte zwei svg einem Elemente, die das Polygon und die andere enthält rect enthält, Bild, so wie in dem Arbeitsbeispiel.

Danach kopierte ich den ClipPath Code aus dem tatsächlichen Arbeitsbeispiel, und es funktioniert jetzt.

Überprüfen Sie das folgende Beispiel

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