<text>
SVG <text>
要素は、テキストからなるグラフィクス要素を定義します。<text>
には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。
SVG 内でテキストが <text>
要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、ディスプレイプロパティ (en-US) を変更してもテキストは表示されません。
使用可能な場所
カテゴリー | グラフィック要素、テキストコンテンツ要素 |
---|---|
許可されている内容 | 任意の順で文字データと任意の数の以下の要素。 アニメーション要素 説明的要素 テキストコンテンツの子要素 <a> |
属性
グローバル属性
専用属性
DOM インターフェイス
この要素は SVGTextElement
インターフェイスを実装します。
例
基本的なテキストの使用例
SVG
html
<svg
xmlns="http://www.w3.org/2000/svg"
width="500"
height="40"
viewBox="0 0 500 40">
<text x="0" y="35" font-family="Verdana" font-size="35">
Hello, out there
</text>
</svg>
結果
回転テキスト
SVG テキストは回転することができます。
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120">
<text x="0" y="20" transform="rotate(30 20,40)">
SVG Text Rotation example
</text>
</svg>
結果
着色テキスト
SVG テキストは着色することができます。
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
<text x="10" y="20" stroke="none" fill="red">SVG Colored Text</text>
</svg>
結果
CSS を用いたテキストのスタイリング
SVG テキストは HTML テキストのようにスタイリングできます。
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
<text
x="10"
y="40"
style="font-family: Times New Roman;
font-size: 44px;
stroke: #00ff00;
fill: #0000ff;">
SVG text styling
</text>
</svg>
結果
仕様
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextElement |
ブラウザー互換性
BCD tables only load in the browser