memocarilog

インライン SVG 内にテキストを表示した際に使えそうな装飾や配置方法をいくつか書き出してみました。サンプルで使用した SVG アイコンはこちら Freebie: Roundicons Icon Set (60 Icons, PNG, SVG, EPS, AI) | Smashing Magazine よりダウンロードさせて頂きました。

基本的な text 要素の使用方法などは以下の記事が参考になると思います。

文字に縁取りをつける

ベーシック

See the Pen ふちどりつける by Saomocari (@Saomocari) on CodePen.

HTML

<svg width="700" height="140">
<g>
<g>
<circle fill="#49A0AE" cx="68.457" cy="68.456" r="63.333"></circle>
<g>
<path fill="#565453" d="〜略（アイコンの描写）〜"></path>
<rect x="95.149" y="90.585" fill="#565453" width="2.662" height="1.455"></rect>
<path fill="#E84849" d="〜略（アイコンの描写）〜"></path>
</g>
</g>
</g>
<text x="80" y="80" class="text">
テキストにふちどりをつけます。
</text>
</svg>

CSS

.text{
  font-weight: bolder;
  font-size: 38px;
  fill:#F5F1E9; /* テキストの色 */
  stroke: #CCDFCB; /* ふちどりの色 */
  stroke-width: 2px;  /* ふちどりのふとさ */
}

text 要素に対して stroke と stroke-width の指定をして文字の枠線を表示します。stroke には縁取りの色を指定し、stroke-width は縁取りの太さを指定します。text 要素内の文字色は fill プロパティで指定します。

縁取りを破線にする

See the Pen 破線のふちどり by Saomocari (@Saomocari) on CodePen.

※Opera では上手く表示されませんでした…。

HTML

<svg width="700" height="140">
〜略（アイコンの描写）〜
<text x="80" y="80" class="text">
ふちどりを破線にします。
</text>
</svg>

CSS

.text{
  font-weight: bolder;
  font-size: 40px;
  fill:#fff;
  stroke: #EB871C;
  stroke-width:2px;
  stroke-dasharray:10,2;  /* 破線の指定 */
}

ふちどりを破線にするには、ベーシックのスタイルに stroke-dasharray の指定をプラスします。このサンプルでは stroke-dasharray に 10,2 の値を指定し、10px の線を 2px 間隔で表示する設定にしています。

ちょっと個性的にしたい場合にいいかなと思いました。

太丸ゴシック風のまるい縁取りにする

See the Pen ふちがまるい by Saomocari (@Saomocari) on CodePen.

HTML

<svg width="700" height="140">
〜略（アイコンの描写）〜
<! -- ふち丸の指定 。下になる文字 -- >
<text x="80" y="85" class="text" stroke-linejoin="round">
ふちがまるい文字。
</text>
<text x="80" y="85" class="text2">
ふちがまるい文字。
</text>
</svg>

CSS

.text{
  font-weight: bold;
  font-size: 50px;
  stroke: #FF675C;　/* 枠線のいろ */
  stroke-width: 12px;　/* 枠線を太めに指定 */
}
.text2{
  font-weight: bold;
  font-size: 50px;
  fill:#F5F1E9;
}

このサンプルでは、ふちが丸い文字をつくるのに二つの文字を重ね合わせています。

SVG要素内では描写するものが重なった場合に、後に記述したものが上に表示されるため、text 要素を表示する座標を同じにし文字を重ね、まるい枠線をつけたテキストを下、通常のテキストを上にして一つのテキストのようにみせています。

ふち取りをまるくするには stroke-linejoin 属性 を round に設定します。stroke-linejoin　はスタイルプロパティとしても設定できるのかと思いましたが、実際やってみると反映されなかった為属性値として HTML 側に指定しています。

丸みを出すのに stroke-width を大きい値で指定する必要があり、文字が枠線につぶされてしまったので、もう一つ通常の文字を上に重ねてみました。

stroke-width の太さを変更すると丸みの調整ができます。

文字列の一部分だけスタイルを変更する

See the Pen テキストの一部をスタイル変更 by Saomocari (@Saomocari) on CodePen.

HTML

<svg width="700" height="140">
〜略（アイコンの描写）〜
<text x="13" y="80" class="text">
  <tspan class="white">テキス</tspan>トの一部をスタイル変更
</text>
</svg>

CSS

.text{
  font-weight: bolder;
  font-size: 38px;
  fill:#00BD9C;
}
/* tspan の指定 */
.white{
  fill:#fff;
  text-shadow: 0 1px 1px #666;
}

文字列内の一部だけ文字のスタイルを変えたい場合は、tspan 要素を使用します。span 要素と使い方も意味合いも同じ感じです。

最初のアイコンに重なる3文字だけスタイル変更したいので、HTML の最初の3文字を tspan 要素で囲みクラスを付けます。スタイルシート側でそのクラスにスタイルを設定します。

指定した長さに均等に文字を表示する

See the Pen テキストを均等割付けする by Saomocari (@Saomocari) on CodePen.

HTML

<svg width="700" height="140">
<! -- textLength を指定 ↓ -- >
<text x="13" y="80" class="text" textLength="700">
 テキストを均等割付けする
</text>
</svg>

CSS

.text{
  font-weight: bolder;
  font-size: 38px;
  fill:#FDA93B;
}

指定した長さに均等に文字を配置するには、text 要素に textLength 属性を指定し、値に表示させたい長さを指定するだけです。とても簡単ですね。

ちなみに、textLength 属性と合わせて lengthAdjust=”spacingAndGlyphs” という指定を入れると、均等割付けされた文字と文字との間隔をスペースではなく、文字を太くして文字幅で埋めることができます。平体みたいな文字にしたい場合に使えそうです。

パスの形に合わせて文字を表示する

See the Pen textpath by Saomocari (@Saomocari) on CodePen.

HTML

<svg width="700" height="140">
<!-- defs で path を囲む ↓-->
<defs>
<path id="textpath" d~"〜略（パスの座標）〜" />
</defs>
 
<image x="0" y="0" width="600" height="430" xlink:href="https://memocarilog.info/memocarilog-demo/neko.jpg" />
 
<text class="text">
    <!-- xlink:href で path#textpath の形状を参照する ↓-->
    <textpath xlink:href="#textpath">ふかふかのベットできもちよくねむるネコ</textpath>
</text>
</svg>

CSS

.text{
  fill: #fff;
  font-size:23px;
}

これは個人的に一番いいなと思った機能ですが、path 要素で描写されるパスの形に文字を配置します。

まずは好きな形に illustrator などでパスを書き SVG 形式で保存します。保存した SVG ファイルをテキストエディタで開き <path d=”M〜略〜 “/> となっている箇所を HTML の svg タグ内に貼付け、id を振ります。

そしてこの path 要素を <defs></defs> で囲います。defs 要素で囲った path 要素はその形状を定義した（テンプレート化）ということになり表示されなくなります。

パスの形に文字を表示するには、textpath 要素を使用します。textpath 要素に xlink:href 属性で先にテンプレート化したパスの id 名を指定します。これで path の形状を参照してその形にテキストを配置してくれます。

サンプルではネコの画像も合わせて表示させてみました。直線的にテキストを配置するよりも曲線上にテキストを置いたほうが動物のやわらかい感じが伝わりますし、ネコのかわいさも引き立ちますね。