我正在尝试使用javascript为＃circle-hole-2圆的半径设置动画。这样它就可以将半径设置为0到175px。但我不知道如何以一种常见的方式做到这一点。我不能使用CSS因为似乎在firefox上使用另一个规范来为css制作动画面具。
<svg width="400" height="300">
<defs>
<mask id="hole">
<circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" />
<rect id="mask-hole-3" width="100%" height="100%" fill="white"/>
<circle id="mask-hole-2" cx="165" cy="156.5" r="145" />
</mask>
</defs>
<image width="400" height="300"
xlink:href="http://lorempixel.com/400/300/sports/"
mask="url(#hole)"/>
</svg>
我想＃mask-hole-1在2秒内将其半径从0改为175.在2s之后#mask-hole-2也应该将其半径从0改为175。 如果动画顺利运行会很好。任何帮助表示赞赏。