经过更深入的研究，当直接使用图像时，IE仅支持clip像矩形一样，但不支持clipPath复杂形状。
我的解决方案是将图像添加到SVG中，如下所示，这一次它可以在Chrome和IE9 +中使用。
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;}<div id="image-wrapper"> <svg id="svg-1" > <rect width="300" height="300" fill="#ffffff" /> <image id="img-1" 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>
