svgを使ってテキストにグラデーションをかけるという小技 #svg

svgを使ってテキストにグラデーションをかけるという小技 #svg

svgも徐々にメジャーになりつつあります。これをうまく駆使すると、今回紹介するようなテキストにグラデーションをかけるといったこともできるようになります。

今回の記事では↓のようなことをやるのが目的。
テキストにグラデーション
はい、見事にテキストにグラデーションがついているのがわかりますか?

svgをインラインで使うことで、こんなふうにテキストグラデーションを表現することができます。いやいや便利な世の中になりました。もっとキレイなグラデーションを選べばよかったなあと少し後悔しています。

wordpressでsvgを使う時の注意

自分も四苦八苦したので、wordpressの投稿としてインラインsvgを使う時の注意点です。

tiny mce advancedを使っている場合

まずはtiny mce advancedなどのビジュアルエディタにsvgタグを認識させることが必要です。

functions.phpに上記のコードを挿入しておきましょう。(参考:[WordPress] ビジュアルエディタをインライン SVG に対応させる方法

svgを書き込むときは改行を全部削除する

これも自分がドハマリしたことですが、インラインでsvgを使うときはsvgのコードの改行やタブを全部削除することが必要です。でないと自動的に<br>タグが追加されてしまってまったく表示ができなくなってしまいます。

テンプレートファイルに直接書き込むときは、この作業は必要ありません。

今回のテキストにグラデーションのサンプルコード

まず、<defs>~</defs>の部分で、svgのグラデーションを定義します。svgのグラデーション用のタグである<linearGradient id=”g0″>を使います。今回はlinearGradientを使用しました。このときidの設定を忘れないようにしてください。

次に<g>タグにfontのスタイルを書き込みます。font-familyやfont-weight、font-sizeはこの中に突っ込んでおきましょう。

<text>~ </text>に文字を入れれば、テキストが表示されます。このとき、viewboxで指定した範囲内の右上がx座標、y座標の(0,0)の位置になるので、それに合わせてxとyの数字を入れる必要があります。面倒ですが、ここがポイントです。
さらに<defs>~</defs>で設定したグラデーションを読み込むために、fill=url(#g0)を入れます。fillはsvgの塗りつぶし用の要素です。

あとはhtmlと同じ要領でタグを閉じていきます。

他にはこんなことも!

ナナメにグラデーション!!!
円形にグラデーション!!!
などという感じで遊ぶこともできます。そのうちブログのタイトルはsvgで作ってみようと思います。

292 views/total