目次
SVGアニメーションの「線の進行方向」は簡単に変えられない
Vivus.jsなどで線のアニメーションをつけたい時、線の進行方向はJavaScriptで変更できません！
つまり、データを作る時にSVGの視点と終点を逆にする必要があります。
（CSSアニメーションのみで実装している場合、簡素な図形は変更することもできます。しかし、複雑な図形やVivus.jsでは変更することが難しいです。）
実装した時に「アニメーションが逆に動いている」と気づくことがよくあります；；
こんな感じに矢印が逆に動いていると焦りますよね…
こんな時、「線の進行方向を簡単に直す方法」を見つけたのでご紹介します！
Illustratorで「パスの方向反転」させればOK
元データがあれば、Illustratorで簡単に変更することができます。
XDで作成している場合は、SVG部分をIllustratorにコピペして作業することで解決します。
該当するパスを選択し、メニューから「オブジェクト」→「パス」→「パスの方向反転」をするだけです！
これをSVGに書き出すと…
自分の思う方向にアニメーションが動くようになりました！
こちらのサイトを参考にしました！
