Internet Explorer 和剪辑路径

Posted 2023-03-06

【中文标题】Internet Explorer 和剪辑路径

【英文标题】：Internet Explorer and clip-path

【发布时间】：2014-03-21 05:03:55

【问题描述】：

据我所知，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"  />
  </div>
</div>

<svg>
  <defs>
    <clipPath id="pentagon" clipPathUnits="objectBoundingBox">
      <polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" />
    </clipPath>
  </defs>
</svg>

【问题讨论】：

IE 哪个版本？ IE9+ 支持 SVG。

它是 IE9+，这就是为什么我很惊讶，它应该可以工作，但对我来说没有乐趣。

【参考方案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'   fill="#ffffff" />
        <image id="img-1" class='svg-image'   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>

【讨论】：

我对这个答案做了我认为更清晰的分叉：jsfiddle.net/2wu0dwrL

但是，如果图像具有响应大小，它似乎将不起作用。对吗？

这适用于 Apple 和 ios 设备吗？我的研究说不：developer.mozilla.org/en-US/docs/Web/CSS/clip-path

它适用于 iOS 11、Windows 10 / IE 11、Chrome 87、FF 76.0.1

【参考方案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>