Internet Explorer 和剪辑路径

Question

据我所知，clip-path 应该在 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 只支持矩形形状的剪辑，而不支持 clipPath 复杂的形状。

我的解决方案是将图像添加到 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

看看这个Demo JsFiddle，它支持响应式图片并且有据可查

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

  <svg class="member-picture">
      <image xlink:href="https://via.placeholder.com/350x200"></image>
  </svg>
  <svg viewBox="0 0 250.35696 212.65134"> <!--viewBox = "X1 Y1 X2 Y2"-->
    <defs>
      <clipPath id="small-clip" clipPathUnits="objectBoundingBox"
                  transform="scale(.0039 .0047)">
                  <!--Use clipPathUnits="objectBoundingBox" and transform="scale(1/(viewBox.X2-viewBox.X1) 1/(viewBox.Y2-viewBox.Y1)" -->
        <path      d="M231.76,2.10959c5.989,1.0033,11.34394,3.5405,14.95847,9.74636,5.229,8.97779,3.54658,20.83845,2.65967,30.67514-4.2102,46.31217-8.047,92.66163-12.03267,138.993A28.82369,28.82369,0,0,1,235.49314,189.8c-2.913,7.28451-8.96608,11.54254-17.95131,14.28814-10.36022,3.16575-21.42435,3.0895-32.14721,3.458L40.64126,212.52043c-7.4331.25543-15.17585,0.4528-21.94517-2.62817C9.79852,205.84265,4.11114,196.65751,1.7732,187.16541S-0.05058,167.74594.329,157.97752c1.53266-39.43778.62959-78.92331,0.4924-118.39062C0.7836,28.70009,1.2929,16.57391,9.01875,8.9034,20.99475-2.98675,42.47458.45166,57.6212,0.4913q29.26963,0.07661,58.5389.24813,48.42851,0.2838,96.855.82742C219.161,1.63584,225.777,1.1073,231.76,2.10959Z"
              fill="#4d4d4d">  
        </path>
      </clipPath>
    </defs>
  </svg>