Internet Explorer和剪辑路径 [英] Internet Explorer and clip-path
问题描述
至于我知道clip-path应该在IE中工作,如许多文章和本教程 HTML CSS 当直接使用图像时,IE支持的剪辑只有矩形,而不是clipPath复杂的形状。 我的解决方案是将图像添加到下面的SVG,这一次它在Chrome和IE9 +中都有效。 CSS HTML 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. HTML CSS
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+. CSS HTML
这篇关于Internet Explorer和剪辑路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
< >
< div class =容器>
< div class =avatar>
< img class =pentagonsrc =http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpgalt =/>
< / div>
< / div>
< svg>
< defs>
< clipPath id =pentagonclipPathUnits =objectBoundingBox>
< polygon points =。5,0 1,.30 .2,1 .2,1 0,.30/>
< / clipPath>
< / defs>
< / svg>
.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);
}
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>
< div id =image-wrapper>
< svg id =svg-1class =clip-svg>
< rect class ='svg-background'width =300height =300fill =#ffffff/>
< image id =img-1class ='svg-image'width =300height =300xlink: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>
<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>
.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);
}
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>
<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>