<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

関連情報