How to create a circle "clip-path" in IE and Firefox?
I have this snippet for cicrle masking. It works on Chrome.
But how do you run it in Firefox and IE? Please don't use a radius board ...
.circle {
-webkit-clip-path: circle(100px at 100px 100px);
clip-path: circle(100px at 100px 100px)
}
<img src="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>
.circle {-webkit-clip-path: circle (50% at 50% 10%); clip path: circle (50% at 50% 10%); }
+3
source to share
1 answer
Well IE doesn't support CSS path at all and Firefox only supports url method so the solution is pretty much a dead end - http://caniuse.com/#feat=css-clip-path
However, you can use inline SVG for the image clip as it has excellent browser support - http://caniuse.com/#search=inline%20svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve" width="200px">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" width="768" height="432" xlink:href="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg"></image>
</g>
</svg>
Working example - http://codepen.io/taneleero/pen/BNZjdj
+4
source to share