<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>
実行すると次のように横線が描かれます。