如何使用animate缩放svg元素?

时间:2016-04-26 14:13:14

标签: javascript animation svg snap.svg

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

{{1}}

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

我在扩展方面遇到了麻烦,网上有太多解决方案,我发现这些解决方案完全无法穿透。请帮忙!

1 个答案:

答案 0 :(得分:2)

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

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

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

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

您也可以组合转换元素,例如

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

为了将't'200,200转换为scalex,y'为2,4

jsfiddle