<text>

この記事は翻訳作業中です。

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

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

使用可能な場所

カテゴリーグラフィックス要素 、 Text content element
許可された内容文字データと任意の数の以下の要素を任意の順で:
アニメーション要素
説明的要素
Text content 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> の定義
勧告 初期の定義

ブラウザー互換性

機能 Chrome Edge Firefox (Gecko) IE Opera Safari
基本サポート 1.0 (有) 1.5 (1.8) 9.0 8.0 3.0.4
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0 (有) 1.0 (1.8) 未サポート (有) 3.0.4

この表は このソース に基づきます。

ドキュメントのタグと貢献者

 このページの貢献者: dskmori, lakiryt
 最終更新者: dskmori,