Internet Explorer 和剪辑路径 [英] Internet Explorer and clip-path

问题描述

据我所知，clip-path 应该可以在 IE 中使用，正如许多文章和本教程中所展示的那样CSS 掩蔽

但是我无法在 IE 上正常运行以下内容，但它在 Chrome 上运行良好.

.container {位置:相对；宽度:240px；高度:500px；左:50%；顶部:50%；}.五边形{-webkit-clip-path: 多边形(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);-o-clip-path: 多边形(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);-ms-clip-path: 多边形(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);向左飘浮;}.头像{边距顶部:50px；}html {文本对齐:居中；最小高度:100%；背景:线性渐变(白色，#ddd)；}h1,p{颜色:RGBA(0, 0, 0, .3);}

<div class="avatar"><img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt=""/>

解决方案

经过深入研究，在直接处理图像时，IE 仅支持矩形形状的剪辑，不支持剪辑路径复杂的形状.

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

演示 JsFiddle

body {背景颜色:#e0e0e0；}#图像包装{位置:相对；}.svg 背景，.svg 图像 {剪辑路径:网址(#剪辑三角形)；}.svg 图像 {-webkit-transition:所有 0.5s 缓解 0.2s；-moz-transition:所有 0.5s 缓解 0.2s；不透明度:1；过渡:所有 0.5s 缓解 0.2s；}svg.clip-svg {高度:250px；位置:绝对；宽度:250px；}#svg-1 {左:0px；顶部:0px；}

<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>
<svg id="svg-defs"><定义><clipPath id="clip-triangle"><polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/></clipPath></defs></svg>

As far as I'm aware clip-path should work in IE, as demonstrated in many articles and this tutorial CSS Masking

However I can't get the below to run properly on IE, but it works fine on 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>

解决方案

After more in depth research, when working with the image directly, IE supports clip as in rectangular shapes only but not clipPath complicated shapes.

My solution was to add the image to an SVG as below, and this time it works in both Chrome and 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>

这篇关于Internet Explorer 和剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！