Question

据我所知，剪辑路径应该可以在IE中使用，正如许多文章和本教程所示CSS Masking

但我无法让以下内容在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支持剪辑，只有矩形形状，但不支持剪辑路径复杂的形状。

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

Demo JsFiddle

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>

Answer 2

看看这个this comment from GitHub它支持响应式图像并有据可查

videoFeed

    .member-picture {
      width: 200px; /*Final image width*/
    }
    
    .member-picture image{
      width:100%; /*for responsive image behaviour*/
      clip-path: url('#small-clip');
    }

Internet Explorer和剪辑路径

2 个答案: