svg clipPathはクリップしません

Question

transparent arrow over an imageを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

私が何をUAに代わりpolygon

Answer 2

Iは、ポリゴンを含み、他方は単に実施例のように、RECT、画像を含む2 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>