SVGテキストを作ってみた
いろんなサイトを読み漁り、試してみた。読むとやるのでは大違いを感じたね。Illustratorで書き出せばいいんでしょ？程度に甘くみてました。
動かない・・・
そんなに甘くなかったです。
ありがとうなサイト
まずIllustratorの参考
滑らかで美しい表現ができる！SVGアニメーションを使ってみよう | Tech2GO
Code部さんのサイトは「こんなの作ってみたい〜」をかきたててくれます。
特に途中の「Demostration」がしたい！
ただやりかたは書かれていないから・・・と模索。
こちらで実際のハウツーがありました。
でも、あまり読まないでやろうとしていた文字（フォント）がこちら
これがどうなるのかも想像できずのまま、書き出して、CSSもコピペしてGO!
？？？
何も表示されない。SVGファイルなのですから普通にイメージが表示されると思っていたのですが、それもなく、ただ「ふん、知らんがな。」状態。HTMLってひどい。どこが間違ってるって教えてくれたっていいじゃない。
何が悪いのか全然わからない。
を何度か繰り返し、やっと気づきます。
テキストツールを使って任意の文字を入力し、アウトライン化する。 つなぎ目が滑らかになるように配置を調整する。
この２つ目が案外肝でした。（アウトライン化はとりあえずしてありましたよ）
サンプルのように文字同士がつながっていなきゃダメっぽいです。（そもそもその前のフォントだとどうなったんだろう？ですけど。）
とりあえず、CSSの前に表示されなきゃだめなので、表示されたらひとまずOKということです。
CSSの参考
「Demonstration」の参考CSSでもいいのだけど、色をつけたい。
そこでお世話になったのがこちら
http://sterfield.co.jp/designer/svg%E3%81%A8css3%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E7%AD%86%E8%A8%98%E4%BD%93%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF/sterfield.co.jp
ほとんどこちらのCSSをパクらせていただきました。ありがとうございます。
CSSは外部ファイルに出来たのですが、SVGパスも外部ファイルに出来るってことのようなのですが、うまくいかず、諦めました。
（ここまでで２時間以上経過してて、動きゃいいやってことになりました。）
このあと、JavaScriptで画面を切り替えてスライドショーです。
