Internet Explorer和剪切路径

经过更深入的研究，当直接使用图像时，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>