<text>

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

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

使用可能な場所

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

結果

仕様

Specification
Scalable Vector Graphics (SVG) 2
# TextElement

ブラウザー互換性

BCD tables only load in the browser

関連情報