Html Internet Explorer 和剪辑路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21904672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer and clip-path
提问by Eric
As far as I'm aware clip-path should work in IE, as demonstrated in many articles and this tutorial CSS Masking
据我所知，剪辑路径应该在 IE 中工作，如许多文章和本教程CSS Masking 所示
However I can't get the below to run properly on IE, but it works fine on Chrome.
但是我无法在 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>回答by Eric
After more in depth research, when working with the image directly, IE supports clip as in rectangular shapes only but not clipPath complicated shapes.
经过更深入的研究，当直接处理图像时，IE 仅支持矩形形状的剪辑，而不支持剪辑路径复杂的形状。
My solution was to add the image to an SVG as below, and this time it works in both Chrome and IE9+.
我的解决方案是将图像添加到 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>回答by Ahmed Asim
Look at this Demo JsFiddleit supports responsive image and well documented
看看这个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>