如何缩放带有动画的svg元素？

Question

以前似乎也曾问过类似的问题，但是这些解决方案似乎都不适合我，因此这是我的代码：

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

vinerBBoxX是元素的x中心，vinerBBoxY是y中心，当缩放而没有动画时，两者都可以正常工作。

我通常在扩展方面遇到了麻烦，并且网络上有太多解决方案，使我发现完全无法理解。 请帮忙！

Answer 1

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

设置动画的属性为“ transform”，因为它与缩放相反（设置时，transform可以将scale作为字符串的一部分，例如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