css - How to create a "clip-path" circle on IE and Firefox? -

-

I have this snippet for seal-masking, it works on Chrome

But firefox and How to run it on IE? Please select a radius-board solution ...

< Preclass = "snippet-code-css lang-css toppint-override"> .circle {-webkit-clip-path: circle (100px 100px at 100px); Clip-path: circle (100px at 100px 100px)} 
  & lt; Img src = "http: / / cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width = "1024" height = "768" alt = "" square = "circle" /> ;

.circle {-webkit-clip-path: circle (50% 50% 10%); Clip-path: circle (50% 50% 10%); }

Well does not support CSS clips-all on IE and only the Firefox URL method Supports 

  & lt; Svg version = "  
  
  
 1.1" xmlns = "http://www.w3.org/2000/svg" Xmlns: xlink = "http://www.w3.org/1999/xlink "x =" 0px "y =" 0px "visible box =" 0 200 200 "xml: space =" protected "width =" 200px "& Gt; & Lt; Defs & gt; & Lt ;! - Defines the shape to use for clipping - & gt; & Lt; Circle id = "circle" cx = "100" cy = "100" r = "100" /> & Lt; / Defs & gt; & Lt; Clippath id = "clip" & gt; & Lt ;! - Creates clipping mask from shape - & gt; & Lt; Use xlink: href = "# circle" overflu = "visible" & gt; & Lt; / Usage & gt; & Lt; / ClipPath & gt; & Lt ;! - applied a group with clipped image - & gt; & Lt; G clip-path = "url (# clip)" & gt; & Lt; Image overflu = "visible" width = "768" height = "432" xlink: href = "http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" & gt; And lieutenant; / Image & gt; & Lt; / G> & Lt; / Svg & gt;

Working Examples -


Comments

Post a Comment