如何在IE和Firefox上创建“剪辑路径”圈？

我有这个cicrle-masking片段。它适用于Chrome。如何在IE和Firefox上创建“剪辑路径”圈？

但是如何在Firefox和IE上运行它？请没有半径-伯德溶液...

.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夹路径：圆（在50％10％50％）; clip-path：circle（50％在50％10％）; }

来源

2014-11-04 yarek

那么IE浏览器不支持CSS夹路径都和Firefox浏览器只支持URL方法，这样的解决方案是一个很值得死胡同 - http://caniuse.com/#feat=css-clip-path

但是你可以使用内联SVG剪辑的形象具有很大的浏览器支持 - 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>

工作的例子 - http://codepen.io/taneleero/pen/BNZjdj徘徊时

来源

2015-06-10 12:01:25

您可以加入萎缩动画的修剪SVG？ – Dunnow 2017-06-19 08:10:25

如何在IE和Firefox上创建“剪辑路径”圈？

回答

相关问题