svg clipPath doesn't clip

Question

I am trying to create a transparent arrow over an image by SVG and clipPath. Here is jsfiddle with working solution.

When I try to apply this solution in my div container, clipPath doesn't clip and image has white background.

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

On my code I have poligon element instead of polygon

Answer 2

I made two svg elements one that contains the polygon and the other contains rect,image, just like in the working example.

After that, I copied the clipPath code from the actual working example, and it works now.

Check the below example

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