css - 如何在 SVG 径向渐变中反转 css 剪辑路径或动画硬停止

Question

似乎通常使用 css clip-path 来隐藏元素的边缘。我可以使用这样的东西:

clip-path:circle(70% at center);

得到这样的东西:

有什么办法可以反转吗？我希望我的结果是这样的:

我想剪裁图像的中心，而不是边缘。这是一个 SVG，所以我尝试了类似这支笔的东西，为径向渐变制作动画:http://codepen.io/ethanclevenger91/pen/myMYwQ

但这并没有像预期的那样工作。有一个动画，然后是一个我认为动画周期的最后一步应该看起来像的东西，但事实并非如此。对其中任何一个的任何了解都将不胜感激。

Answer 1

如果您以其 url 形式使用它，即作为 svg 标记，您仍然可以使用 clipPath。顺时针绘制路径外部矩形和逆时针绘制内部椭圆(使用两个或多个椭圆弧)，将所有内容绘制为一条路径以及 clip-rule="evenodd"

或者，您可以使用 <mask> .这是一个更简单但更慢的解决方案。在蒙版区域内绘制一个白色椭圆，蒙版的那部分将不透明。