gsapとsvgsを使用して「複雑な」アニメーションを行いたい。 しかし、私はこれに最善のアプローチは何か分かりません。 すべての要素で一意のsvgを作成してインポートする方が良いでしょうか、それとももっと良い4つの異なるsvgですか？gsap animation - 1つのsvgまたは複数のsvgをインポートする
私は4つの異なる文字を持っています：木、ランプ、机、男。 基本的に私のアニメーションは、x上のオブジェクトを移動して消えていくものです。
アニメーションの要素が1つの複雑なアニメーションの一部である場合、このために1つのSVGを使用できます。
CSSとJavaScriptを使用してSVGのDOMを制御するには、SVGをHTMLページに直接インラインで追加する必要があります。 imgタグやオブジェクトタグなどでは埋め込まれません。
<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>
この方法のもう1つの利点は、追加のhtml要求がないことです。
さらに、全体のアニメーションをviewBoxを介して反応させることができます。