<text>

SVG <text> 要素は、テキストからなるグラフィクス要素を定義します。<text> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。

SVG 内でテキストが <text> 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、ディスプレイプロパティ を変更してもテキストは表示されません。

使用可能な場所

カテゴリーグラフィック要素 、 テキストコンテンツ要素
許可されている内容任意の順で文字データと任意の数の以下の要素。
アニメーション要素
説明的要素
Text content child elements
<a>

属性

グローバル属性

専用属性

DOM インターフェイス

この要素は SVGTextElement インターフェイスを実装します。

基本的なテキストの使用例

SVG

<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

<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

<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

<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>

結果

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<text> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<text> の定義
勧告 初期の定義

ブラウザー互換性

BCD tables only load in the browser