如何使用动画缩放 svg 元素?

How do I scale an svg element with animate?

之前似乎有人问过类似的问题,但是 none 的解决方案似乎对我有用,所以这是我的代码:

this.animate({scale(2, 2, vinerBBoxX, vinerBBoxY)}, 100, mina.easeinout);

vinerBBoxX 是元素的 x 中心,vinerBBoxY 是 y 中心,在没有动画的情况下缩放时两者都工作正常。

我通常在缩放时遇到问题,网络上有太多我觉得完全无法理解的解决方案。请帮忙!

Snap 使用自己的字符串格式进行转换。 s代表缩放,默认情况下它会围绕它的中心缩放。

要设置动画的属性是 'transform',与缩放相反(变换可以在设置时将缩放作为字符串的一部分,例如变换:'scale(2,2)',但这不能用作动画原样。

最简单的方法是这样的...

g.animate({ transform: 's2,4'}, 2000)

你也可以组合变换元素,比如

g.animate({ transform: 't200,200s2,4'}, 2000)

为了翻译't' 200,200 后接scalex,y 's' 2,4

jsfiddle