Gsap只能导入一个或多个SVG

gsap import only one svg or multiple svgs

本文关键字：一个 SVG 导入 Gsap      更新时间：2023-09-26

我想用gsap和svgs做"复杂"的动画。但我不知道什么是最好的方法。最好是创建和导入一个具有所有元素的唯一SVG，或者最好是4个不同的SVG ?

我有4个不同的角色:一棵树，一盏灯，一张桌子和一个人。基本上我的动画就是在x轴上移动物体，以及出现和消失的东西

如果动画的元素是一个复杂动画的一部分，则可以使用单个SVG。

要通过CSS和JavaScript控制SVG的DOM，您需要将SVG直接添加到HTML页面中。不能通过img标签或object标签或类似的嵌入。

<body>
  <h1>My SVG Animation</h1>
  <svg width="100" height="100" viewBox="0 0 300 100">
    <circle class="animation-element-01" cx="50" cy="50" r="40"/>
    <rect class="animation-element-01" x="150" y="20" width="150" height="150"/>
    <!-- etc -->
  </svg>
</body>

这种方法的另一个优点是，没有额外的html请求。

加上整个动画可以通过viewBox响应

相关文章：