Internet Explorer und Clip-Pfad

Question

Soweit ich bin mir bewusst, Clip-Pfad im IE funktionieren soll, wie in vielen Artikeln unter Beweis gestellt und dieses Tutorial CSS Masking

Jedoch habe ich nicht die unten richtig laufen auf IE bekommen , aber es funktioniert gut in 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

Nach mehr in der Tiefe der Forschung, wenn sie direkt mit dem Bild arbeiten, unterstützt IE Clip als in rechteckigen Formen nur, aber nicht clipPath komplizierte Formen .

Meine Lösung war, das Bild zu einem SVG wie folgt hinzuzufügen, und dieses Mal funktioniert es in Chrome und 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>