如何在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上創建「剪輯路徑」圈？

回答

相關問題