質問: ### 実現したいこと Illustratorで書き出したSVGを使ってアニメーションを作成したいです。 最終的には文字を手書き風に書き出したいです。 ### 発生している問題 **↓Illustratorで作ったSVG** ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/d51119773f614b52092567e90397a1ca.png) 左上から右下にかけてパスを通しています。このパス通りにアニメーションして欲しいです。 Illustratorの線幅ツールを使って線を太くしています。 **↓HTMLにPATHを貼ってCSSを設定、実行** 左上から上を通って右下、右下から下を通って左上へとアウトラインをなぞるようにアニメーションしてしまいます。 左上から右下へとアニメーションして欲しい...!! ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/a2901971311b919ee64e02ec98136ff1.png) ### コード ``` ``` ``` .path{ stroke:black; fill:transparent; stroke-width:5; stroke-dasharray: 5000; stroke-dashoffset:5000; animation: DASH 3.4s ease-in-out alternate forwards; -webkit-animation:DASH 3.4s ease-in-out 0s forwards; animation:DASH 3.4s ease-in-out 0s forwards; } @keyframes DASH{ 0%{ stroke-dashoffset:5000; fill:transparent; } 100%{stroke-dashoffset:0; fill:black; } } @-moz-keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} } @-webkit-keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} } ``` CSSはこちらを参考にしました。 ### 補足情報 お力添えください...!!
回答: 今回のような場合には、徐々に塗っていくということは実現が難しいです。 (この画像の上に画像を重ね、それを消していくというようにすれば、擬似的に塗っているよう見せることができそうです。) 最終的には文字を手書き風に書き出したいとのことであれば、今回の件はスルーされたほうがよいように思います。 SVGでアニメーションを実現する際には、太さ・色が同じパスを線画していくようなイメージの方が簡単です。 (参考にされているサイトで、最初に筆記体の文字をトレースしているのは、筆記体フォントはそれぞれの部分で太さが違うためです。最終的に実現している筆記体はパスの太さが同じですよね?) 太さが違うものを実現したい場合には、下記サイトのように、フォントのアウトラインを徐々に書いていって、最後に塗る、という方法で実現が可能です。 http://ascii.jp/elem/000/000/901/901319/ うまく伝わったかわかりませんが、質問があれば気軽にどうぞ。