svgでテキスト装飾のあれこれ

このエントリーをはてなブックマークに追加

用途的にcssファイルやJavascriptは使わずsvgファイルだけで表示できるものが欲しい事もあり<svg>タグ内で出来ることから学びたい

初めてのsvg文字操作、勉強しながら出来た事を追記していくスタイル

svgのテスト用テンプレート

See the Pen svg Test Template by yochans (@yochans) on CodePen.

解りやすくする為にsvgの背景として同じサイズの四角を作り色を付けてます
<rect width="100%" height="100%" fill="lightskyblue"/>

最低限の指定で文字を入れてみる

See the Pen svg text Template by yochans (@yochans) on CodePen.

さっそくyの座標と始点で躓いたけど、きっとxでも躓くから大丈夫
<svg>タグのviewBox()指定で変わってくるけど基準点は左上の角0,0にはなっている
どうやらデフォルトだとオブジェクトの始点が下にあるらしく描画開始位置を文字のピクセル分下に移動してみた
まったく把握してないけど、先に進んでもいいと思う

font-weightで文字を太くしてみる

See the Pen svg text font-weight:bold by yochans (@yochans) on CodePen.

normal lighter bold bolder 100 200 … 900

strokeで文字を太くしてみる

See the Pen svg text stroke by yochans (@yochans) on CodePen.

使っているフォントにもよる?
strokeは枠線ですが同色を指定する事で太さを変えれますね

text-anchorで横の起点を変更してみる

See the Pen svg text stroke by yochans (@yochans) on CodePen.

https://www.w3.org/TR/SVG/text.html#TextAnchorProperty
start | middle | end | inherit
解りやすくするために中央に線を引いたです
text-anchorで設定するのはオブジェクトの起点の事
開始位置を中央にする事でわかりやすいですね

inheritは継承値、親要素を継承するとな
ふむふむ

dominant-baselineで縦の変更してみ

ない
https://www.w3.org/TR/SVG/text.html#DominantBaselineProperty
auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
多過ぎ!!
・・・多いのは「g」や「y」など下にはみ出る部分を起点にするかどうかって話か
middle、text-after-edge、text-before-edge、inheritだけ覚えておけばとりあえず大丈夫かな

See the Pen svg text dominant-baseline by yochans (@yochans) on CodePen.


tspanで個別に指定してRAINBOWカラー

See the Pen svg text tspan RAINBOW by yochans (@yochans) on CodePen.


rotateやfill-opacityも付けて

See the Pen svg text RAINBOW by yochans (@yochans) on CodePen.


とりあえずここまでにして、次はテキストのアニメーションも勉強しよ



テキスト関連メモ

//フォント
font-family

//サイズ
font-size

//カラー
fill

//透明度
fill-opacity

//斜め、イタリック
font-style //normal italic oblique

//太さ
font-weight //normal lighter bold bolder 100-900

//幅
font-stretch

//始点
text-anchor

//配置
x,y


//////transform
//角度
rotate(,,)

//枠線
stroke
stroke-width

//下線
underline
underline-position
underline-thickness

//取り消し線
strikethrough
strikethrough-position
strikethrough-thickness

//上線
overline
overline-position
overline-thickness

//文字数
textLength
lengthAdjust

//文字間隔
kerning

//単語間隔
word-spacing

//文字区切りで指定
<tspan></tspan>

//その他
tref xlink:href
textPath xlink:href

0 件のコメント :