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

标签 javascript animation svg snap.svg

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

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

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

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

最佳答案

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

关于javascript - 如何使用动画缩放 svg 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36867533/

相关文章:

javascript - RxDom : not working when new id created

javascript - 使用 Resolve 查看之前在 Contentful 上托管的 Angular 8 加载图像

c# - Java 或 C# + XNA 用于一些简单的动画?

javascript - 创建随机图像闪烁

svg - 无法使用 SVG 和 D3.JS 进行抗锯齿

javascript - 如何缩放路径以适合容器

javascript - SVG 到 Canvas 与 canvg 不尊重 css

javascript - 尝试从本地主机获取 json 文件的数据时如何解决 CORS Origin 问题

javascript - 如何使用 javascript 或 jquery 在另一个网站上获取我的网站

javascript - 如何用reactjs实现长滚动和分屏?