javascript - 如何使用动画缩放 svg 元素？

Question

以前似乎有人问过类似的问题，但是似乎没有一个解决方案对我有用，所以这是我的代码:

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

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

我在扩展方面遇到了一般性的问题，而且网络上有太多我觉得完全无法理解的解决方案。请帮忙!

Answer 1

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

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

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

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

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

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

为了翻译 't' 200,200 其次是 scalex,y 's' 2,4

jsfiddle