gsap 动画 - 仅导入一个 svg 或多个 svg

【问题标题】：gsap animation - import only one svg or multiple svgsgsap 动画 - 仅导入一个 svg 或多个 svg
【发布时间】：2016-08-23 20:29:22
【问题描述】：

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

我有 4 个不同的角色：一棵树、一盏灯、一张桌子和一个人。基本上我的动画是在 x 上移动对象，然后出现和消失。

【问题讨论】：

标签： javascript animation svg gsap

【解决方案1】：

如果动画的元素是一个复杂动画的一部分，您可以为此使用一个 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 做出响应。

【讨论】：