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

【问题标题】：How to create a "clip-path" circle on IE and Firefox?如何在 IE 和 Firefox 上创建“剪辑路径”圆圈？
【发布时间】：2014-12-31 19:09:18
【问题描述】：

我有这个用于 cicrle-masking 的 sn-p。它适用于 Chrome。

但是如何在 Firefox 和 IE 上运行它呢？请不要半径边界解决方案...

.circle {
  -webkit-clip-path: circle(100px at 100px 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="" class="circle"/&gt;

.circle { -webkit-clip-path: circle(50% at 50% 10%); 剪辑路径：圆形（50% 到 50% 10%）； }

【问题讨论】：

标签： css internet-explorer firefox

【解决方案1】：

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

【讨论】：

悬停时可以给剪裁的 SVG 添加一个缩小动画吗？