Javascript GSAP：设置SVG动画时保留以前的转换

我正在使用scrollmagic和GSAP制作一个小的交互式网站，以动画化SVG元素。
但是，在设置具有rotate（）变换的元素的y值的动画时，该变换被删除。 将旋转添加到动画中不会产生正确的结果；旋转已从动画中删除，然后重新设置动画
有人知道在GSAP中设置其他属性动画时如何保持SVG元素的旋转吗？
示例代码：
html:

<svg height='300px' width='500px' style='position: absolute;'>
    <rect id='rect' width='200' height='75' style='fill:#888;stroke-width:2;stroke:#000' y='0' x='120' transform='rotate(45)' />
</svg>

---

小提琴：

简短回答：正如塔希尔所建议的，只需将此添加到JS代码中即可：

TweenMax.set("#rect", {rotation:45});

---

我强烈建议您通过GSAP处理所有变换，因为它可以保护您免受诸如浏览器不一致和旋转值超过360度时精度损失等一系列问题的影响

GSAP将变换相关值记录在附加到元素本身的特殊gsTransform对象中；这不仅提高了性能（无需重新解析计算样式矩阵或matrix3d值），还允许完全独立地控制每个变换组件（旋转、scaleX、scaleY、x、y、skewX、skewY等），而不考虑时间偏移或极端旋转值（CSS无法实现）

在您的例子中，您正在混合变换-您将旋转放在属性中，然后您要求GSAP处理转换。GSAP实际上可以解析您输入到transform属性中的矩阵（）值，或者它也可以解析任何CSS转换，但是您碰巧只定义了一个无法解析的rotate（）（恕我不赘述）

---

通过GSAP设置任何与转换相关的值都可以获得最佳的性能和兼容性，而且如果需要，以后可以更轻松地在_gsTransform对象中查找当前值。

请准备一个提琴好吗？提琴已经添加了很多方法，但正如我想象的那样，您正在SVG元素本身上定义

转换

。我所做的也是如此。我已经将

TweenMax

用于

rotation

，并将其从SVG元素本身中删除。有道理吗？

TweenMax.set("#rect", {rotation:45});