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

【问题标题】：How do I scale an svg element with animate?如何使用动画缩放 svg 元素？
【发布时间】：2016-08-20 10:27:06
【问题描述】：

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

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

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

我在扩展方面遇到了问题，网络上有太多我发现完全无法理解的解决方案。请帮忙！

【问题讨论】：

【解决方案1】：

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

动画的属性是'transform'而不是缩放（transform可以在设置时将缩放作为字符串的一部分，例如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

【讨论】：