SVGテキストを作ってみた
いろんなサイトを読み漁り、試してみた。読むとやるのでは大違いを感じたね。Illustratorで書き出せばいいんでしょ?程度に甘くみてました。
動かない・・・
そんなに甘くなかったです。
ありがとうなサイト
まずIllustratorの参考
滑らかで美しい表現ができる!SVGアニメーションを使ってみよう | Tech2GO
Code部さんのサイトは「こんなの作ってみたい〜」をかきたててくれます。
特に途中の「Demostration」がしたい!
ただやりかたは書かれていないから・・・と模索。
こちらで実際のハウツーがありました。
でも、あまり読まないでやろうとしていた文字(フォント)がこちら
これがどうなるのかも想像できずのまま、書き出して、CSSもコピペしてGO!
???
何も表示されない。SVGファイルなのですから普通にイメージが表示されると思っていたのですが、それもなく、ただ「ふん、知らんがな。」状態。HTMLってひどい。どこが間違ってるって教えてくれたっていいじゃない。
何が悪いのか全然わからない。
を何度か繰り返し、やっと気づきます。
テキストツールを使って任意の文字を入力し、アウトライン化する。 つなぎ目が滑らかになるように配置を調整する。
この2つ目が案外肝でした。(アウトライン化はとりあえずしてありましたよ)
サンプルのように文字同士がつながっていなきゃダメっぽいです。(そもそもその前のフォントだとどうなったんだろう?ですけど。)
とりあえず、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パスも外部ファイルに出来るってことのようなのですが、うまくいかず、諦めました。
(ここまでで2時間以上経過してて、動きゃいいやってことになりました。)
このあと、JavaScriptで画面を切り替えてスライドショーです。