今日はSVGでテキストを表示する方法を勉強します・・・
意外と使えると便利なんだよね
というわけで今回も参考図書は「Webで使える!SVGファーストガイド」です。
SVGでテキストを表示する＜text＞要素
SVGで文字を入力するときは text 要素を使用し、ｘ、ｙ座標で表示する位置を決め文字を入力します。
基本的なコード
＜text x=”〇” y=”●”＞入力する文字＜/text＞
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="5" y="30" fill="blue" font-size="20" font-weight="bold">入力する文字</text>
</svg>上の青文字はSVGで入力した文字です。黄色い線が、同じ位置をスタートして引いた直線です。つまり文字を入力するスタート位置は文字下のベースラインの位置になるということです。
文字の配置を一文字ずつ指定
座標を加えることで、一文字ずつ位置を指定することもできます。
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="5 30 60" y="30 35 45" fill="blue" font-size="20" font-weight="bold">入力する文字</text>
</svg>このとき座標は3つ分しか指定していないので、最初の2文字が最初の1、2番目の座標、あとの文は全部3番目で指定した座標から続けて表示されています。
行揃え
text-anchor属性で行揃えを指定できます。
start ・・・デフォルト／左揃え
middle ・・・中央揃え
end ・・・右揃え
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="90" y="30" fill="blue" font-size="20" font-weight="bold" text-anchor="middle">中央揃えです</text>
</svg>黄色い円は指定位置に描いた円です。
指定位置よりもちょっと上に、など、位置をずらしたい場合はdx,dy属性で移動距離を指定してずらします。
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="90" y="30" dy="-10" fill="blue" font-size="20" font-weight="bold" text-anchor="middle">中央揃えです</text>
</svg>dy=”-10″で、先ほどの位置より上に10移動させました。
回転
文字を回転させたい場合は rotate 属性を使用し、角度の数値を指定します。
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="5" y="30" fill="blue" font-size="20" font-weight="bold" rotate="45">入力する文字</text>
</svg>これは時計回りに30度傾けています。
長さの指定（均等割り付け）
文字列の長さを textLength 属性で指定すると文字がその長さの間で均等割り付けされます。
<svg width="200px" height50px" viewBox="0 0 200 50">
<text x="5" y="30" fill="blue" font-size="20" font-weight="bold" textLength="180">入力する文字</text>
</svg>文字の書式設定
文字も図形と同じように、色を塗ったりストロークの幅などを決めたり、見た目をデザインできる属性が複数あります。fill 属性で塗り、stroke 属性で輪郭線の色を決めることができます。輪郭線だけの縁取り文字を描画することもできます。
ほかにも文字にだけ適用される各種書式設定があります
| 属性 | 内容 | 値 |
| font-family | フォント指定 | フォント名 |
| font-size | フォントサイズ | 数値 |
| font-weight | フォントの太さ | normal/bold/bolder/lighter/100~900 |
| letter-spacing | 文字の間隔 | normal/数値 |
<svg width="300px" height50px" viewBox="0 0 300 50">
<text x="5" y="30" fill="blue" font-size="30" font-weight="bold" font-family="serif">入力する文字</text>
</svg>font-family=”serif”にして明朝体を表示させています。
<svg width="300px" height50px" viewBox="0 0 300 50">
<text x="5" y="30" fill="none" stroke="blue" font-size="30" font-weight="bolder">入力する文字</text>
</svg>fill=”none” stroke=”blue”で、縁取り文字を表示させています。
コメント