Internet Explorer和夹路径

Question

据我所知夹路径应该在IE浏览器，在许多文章证明和本教程CSS Masking

但是我不能让下面的对IE正常运行，但它在Chrome上运行良好。

HTML

<div class="container"> 
    <div class="avatar"> 
     <img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" /> 
    </div> 
</div> 

<svg> 
    <defs> 
     <clipPath id="pentagon" clipPathUnits="objectBoundingBox"> 
      <polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" /> 
     </clipPath> 
    </defs> 
</svg> 

CSS

.container { 
    position:relative; 
    width: 240px; 
    height: 500px; 
    left: 50%; 
    top: 50%; 
} 

.pentagon { 
    -webkit-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px); 
    -o-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px); 
    -ms-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px); 
    float:left; 
} 

.avatar { 
    margin-top: 50px; 
} 

html { 
    text-align: center; 
    min-height: 100%; 
    background: linear-gradient(white, #ddd); 
} 
h1, p { 
    color: rgba(0,0,0,.3); 
} 

Answer 1

经过深入的研究，直接与图像工作时，IE支持夹在矩形形状仅但不clipPath复杂形状。

我的解决方案是将图像添加到SVG，如下所示，这次它可以在Chrome和IE9 +中使用。

Demo JsFiddle

CSS

body { background-color: #e0e0e0; } 
#image-wrapper { position: relative; } 
.svg-background, .svg-image { clip-path: url(#clip-triangle); } 
.svg-image { 
    -webkit-transition: all 0.5s ease 0.2s; 
    -moz-transition: all 0.5s ease 0.2s; 
    opacity: 1; 
    transition: all 0.5s ease 0.2s; 
} 

svg.clip-svg { height: 250px; position: absolute; width: 250px; } 
#svg-1 { left: 0px; top: 0px; } 

HTML

<div id="image-wrapper"> 
    <svg id="svg-1" class="clip-svg"> 
     <rect class='svg-background' width="300" height="300" fill="#ffffff" /> 
     <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" /> 
    </svg> 
</div> 
<svg id="svg-defs"> 
    <defs> 
     <clipPath id="clip-triangle"> 
      <polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/> 
     </clipPath> 
    </defs> 
</svg>