用途的にcssファイルやJavascriptは使わずsvgファイルだけで表示できるものが欲しい事もあり<svg>タグ内で出来ることから学びたい
初めてのsvg文字操作、勉強しながら出来た事を追記していくスタイル
svgのテスト用テンプレート
解りやすくする為にsvgの背景として同じサイズの四角を作り色を付けてます
<rect width="100%" height="100%" fill="lightskyblue"/>最低限の指定で文字を入れてみる
さっそくyの座標と始点で躓いたけど、きっとxでも躓くから大丈夫
<svg>タグのviewBox()指定で変わってくるけど基準点は左上の角0,0にはなっている
どうやらデフォルトだとオブジェクトの始点が下にあるらしく描画開始位置を文字のピクセル分下に移動してみた
まったく把握してないけど、先に進んでもいいと思う
font-weightで文字を太くしてみる
normal lighter bold bolder 100 200 … 900
strokeで文字を太くしてみる
使っているフォントにもよる？
strokeは枠線ですが同色を指定する事で太さを変えれますね
text-anchorで横の起点を変更してみる
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だけ覚えておけばとりあえず大丈夫かな
tspanで個別に指定してRAINBOWカラー
rotateやfill-opacityも付けて
とりあえずここまでにして、次はテキストのアニメーションも勉強しよ
関連：無料で使えるSVGエディタを比較してみた
テキスト関連メモ
//フォント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 件のコメント :
コメントを投稿