SVGとCSS3でできる筆記体のアニメーションをやってみる | スターフィールド株式会社
SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。 想像していたよりも、ずっと簡単にできることがわかりました。 こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、 ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法 基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。 このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。 ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し
SVGでテキストの縦位置(baseline)を調整する方法を調べてみた - 風柳メモ
SVGで、テキストの縦位置(baseline)を揃える処理を書こうとしてはまったので、覚え書き。 経緯 コピィ・ライターを作成していてふと、 「あれ？ 基本的にテキストを配置してバナーを作るものだし、SVGと相性良いんじゃ？ 設定ファイルを JSON で書き出しているところをちょっといじれば、SVG で書き出すこともできるようになるかも？」 と思い立ったので、処理を追加してみたところ、テキストの baseline を揃えるところで苦労したというもの。 そもそも、SVGをいじるのはこれが初めてなので、誤解をしているところはあるかも……変なところがあればご指摘願いたい。 どこではまったか？ 「え……またIEかよっ！」 HTML5 Canvas の場合、textBaseline プロパティを指定すればテキストの baseline が指定できていた。 同じようなものが SVG でも無いか探してみる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
