Internet Explorer和剪切路径

Question

据我所知，正如许多文章和本教程CSSMasking中所展示的那样，剪贴路径应该在IE中也可以使用

但是我无法让以下内容在IE上正常运行，但在Chrome上运行正常。

.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);

}


<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>

Answer 1

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