text

<text>要素はグラフィックス描画面にテキストを描きます。

<text>要素を使って描きます。

次の書式でテキストを指定した点(x,y)から(デフォルトで)右方向に描くことができます。


  グラフィックスとして描く文字列
  

例えば次のように使います。


  <svg width="100" height="50" stroke="black" style="font-size:12px; stroke-width:1px">
      <text x="10" y="50" stroke="black" stroke-width="3" /><文字列/>
  </svg>
  

これは次のように文字列を描きます。

文字列

要素に指定可能な主な属性を次の表に示します。

属性 解説
x テキストの描画開始点のX座標
y テキストの描画開始点のY座標
stroke テキストの色 blue、red
stroke-width テキストの線の太さ 1px
text-decoration テキストの修飾 underline(下線)、overline(上線)、line-through(取消線)
word-spacing 単語間のあき 2、-0.5
visibility テキストの可視性 hidden(隠す)、visible(表示する)
font-size フォントのサイズ 12px、10.5pt
font-family フォントの種類 serif、monospace、Century
font-weight フォントの太さ bold、nomal
font-style フォントのスタイル italic、nomal

次の例はさまざまな条件でテキストを描く例です。


  <svg width="250" height="160" stroke="black" style="font-size:12px; stroke-width:1px">
    <text x="10" y="30">普通の文字列</text>
    <text x="10" y="50" text-decoration="underline">下線付きテキスト</text>
    <text x="10" y="70" text-decoration="overline">上線付きテキスト</text>
    <text x="10" y="90" text-decoration="line-through">取り消し線付きテキスト</text>
    <text x="10" y="120" style="font-size:24px; fill:none">太線で塗り潰しなし</text>
  </svg>
  

実行すると次のように横線が描かれます。

普通の文字列 下線付きテキスト 上線付きテキスト 取り消し線付きテキスト 太線で塗り潰しなし

SVG目次 inserted by FC2 system