SVGによるテキストの描画サンプル

テキストの描画方法

SVGでテキストを描く場合はtextを使用します。以下に記述例を示します。

<text x="x" y="y" font-size="h" transform="rotate(a x2 y2)">str</text>
<text x="x" y="y" font-size="h">str</text>

記述例のパラメータは下記のとおりです。開始点は大まかに表現するとテキストの左下の位置になります。
transformのrotateは文字列全体を回転させるときに用います。省略可能です。

開始点:(x,y) h:文字の大きさ a:角度(度) 回転の中心点:(x2,y2)

ベースライン

開始点は、下図の赤点の位置になります。
赤線がベースラインとなります。
緑線はベースラインからfont-sizeで指定した値分をy座標の値が少なる方向で平行移動させた線です。
ベースラインから特にアルファベットのgjyは下にはみ出る点に気をつける必要があります。

文字揃え(text-anchor)

text-anchor属性を使用すると文字の位置を左端基準、中心、右端基準を指定できます。指定しない場合は左端となります。

text-anchor属性	文字揃え
start	左端を基準に配置
middle	文字列の中心を基準に配置
end	右端を基準に配置

以下にsvgソースと表示例を示します。青線がtextのx属性で指定しているx座標です。

<svg width="260" height="100"  viewBox="-130 -30 260 100" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="0" font-size="20" stroke="black" text-anchor="start"  stroke-width="0.5" >左端基準start</text>
  <text x="0" y="30" font-size="20" stroke="black" text-anchor="middle" stroke-width="0.5" >中心基準middle</text>
  <text x="0" y="60" font-size="20" stroke="black" text-anchor="end" stroke-width="0.5" >右端基準end</text>
</svg>

フォームより文字の左下の座標、文字列、文字の大きさ、角度を入力して実際に描画してみる

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるように指定してください

0,80の位置に高さ40で角度0で文字列を表示する

<text x="0" y="80" font-size="40">漢字サンプル</text>

textの幅と高さを取得

テキストの幅は文字種等によりことなるため動的に文字幅を取得するにはjavascriptを使います。
document.getElementByIdでtextのオブジェクトを取得しgetBBoxでその矩形領域を取得します。
矩形領域のプロパティx,y,width,heightが左,上,幅,高さの値を示します。
得た矩形領域の値により長方形の大きさを変化させた結果が黄色の長方形になります。
以下にidがtext1のテキストの大きさに合わせてidがbox1の長方形(rect)を調整するソースコードを示します。

var t=document.getElementById("text1");
var tb=t.getBBox();
var b=document.getElementById("box1");
b.setAttribute("x",tb.x);
b.setAttribute("y",tb.y);
b.setAttribute("width",tb.width);
b.setAttribute("height",tb.height);

取得したテキストの横幅を用いてフォントサイズを動的に変化させることにより指定幅のテキストを作成することができます。
テキストのフォントサイズはgetAttribute('font-size')により取得できます。ただし取得された値は64pxの様に数値でない文字を含みますので、parseIntで数値だけを取得します。
元のフォントサイズ×指定幅/元のテキスト幅を新規のフォントサイズとして設定すれば指定幅のテキストになります。(高さも変化します。)
元のフォントサイズは余り小さい値ですと誤差により少なめの幅になってしまうのでそこそこ大きな値を設定する必要あります。
上図のフォントサイズ16の調整前の幅300のテキストのフォントサイズを調整して幅300にすると調整後の幅300のテキストになります。以下にidがtext2のテキストの幅を300にするソースコードを示します。

var t=document.getElementById("text2");
var ts=parseInt(text.getAttribute('font-size'));
var s=ts*300/tb.width;
t.setAttribute("font-size",s);

パス上にテキストを表示

半円状のパスにテキストを添わせて表示する例です。

<svg width="200" height="200"  viewBox="-20 -60 200 200" xmlns="http://www.w3.org/2000/svg">
  <path id="p1" d="M 0,100 A 100 100 0 0 1 200,100" stroke="black" fill="none" />
  <text font-size="20" stroke="black" dy="-10">
    <textpath xlink:href="#p1">
      textpathサンプル dy=-10
    </textpath>
    </text>
    <text font-size="20" stroke="black" dy="20">
    <textpath xlink:href="#p1">
      textpathサンプル dy=20
    </textpath>
  </text>
</svg>

テキストの拡大縮小

テキストを拡大縮小した場合の見栄えの例を示します。

通常

viewBoxで拡大

viewBoxで縮小

scaleで縮小

<svg width="300" height="25"  viewBox="0 -20 300 25" xmlns="http://www.w3.org/2000/svg">
  <text font-size="20" stroke="black" fill="black">font-size=20 1倍 123abc漢字</text>
</svg>
<h3>viewBoxで拡大</h3>
<svg width="300" height="40"  viewBox="0 -15 200 20" xmlns="http://www.w3.org/2000/svg">
  <text font-size="10" stroke="black" fill="black">font-size=10 2倍 123abc漢字</text>
</svg>
<h3>viewBoxで縮小</h3>
<svg width="400" height="25"  viewBox="0 -40 800 50" xmlns="http://www.w3.org/2000/svg">
  <text font-size="40" stroke="black" fill="black">font-size=40 0.5倍 123abc漢字</text>
</svg>
<h3>scaleで縮小</h3>
<svg width="400" height="25"  viewBox="0 -20 400 25" xmlns="http://www.w3.org/2000/svg">
 <g transform="scale(0.5,0.5)">
  <text font-size="40" stroke="black" fill="black">font-size=40 0.5倍 123abc漢字</text>
 </g>
</svg>

ページのトップへ戻る

山本ワールド

コンピューター