<text>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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

SVG 内でテキストが <text> 要素内以外で組み込まれた場合、レンダリングされません。これは非表示になるのが既定だというわけではなく、display を変更してもテキストは表示されません。

メモ: 既定では <text> 要素は折り返されません。これを実現するには CSS の white-space プロパティでスタイル設定する必要があります。

使用コンテキスト

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

属性

x: テキストのベースラインの始点の x 座標、または値のリストが指定されている場合は個々のグリフの x 座標。 値の型: (<length> | <percentage>) のリスト; デフォルト値: 0; アニメーション: 可
y: テキストのベースラインの始点の y 座標、または値のリストが指定されている場合は個々のグリフの y 座標。 値の型: (<length> | <percentage>) のリスト; デフォルト値: 0; アニメーション: 可
dx: テキスト位置を前回のテキスト要素から水平方向にずらすか、値のリストが指定された場合は個々のグリフの位置をずらします。 値の型: (<length> | <percentage>) のリスト; デフォルト値: none; アニメーション: 可
dy: テキスト位置を前回のテキスト要素から垂直方向にずらすか、値のリストが指定された場合は個々のグリフの位置をずらします。 値の型: (<length> | <percentage>) のリスト; デフォルト値: none; アニメーション: 可
rotate: 個々のグリフの方向を回転します。グリフを個別に回転可能です。 値の型: <list-of-number>; デフォルト値: none; アニメーション: 可
lengthAdjust: textLength 属性で定義する幅に収まるようにテキストをどのように伸縮させるか。 値の型: spacing|spacingAndGlyphs; デフォルト値: spacing; アニメーション: 可
textLength: テキストを合わせるために変倍する幅。 値の型: <length> | <percentage>; デフォルト値: none; アニメーション: 可

DOM インターフェイス

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

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
    }

    /* テキストの色は fill プロパティで設定されます。 *
     * color プロパティは HTML でのみ使用されます。   */
    .Rrrrr {
      font: italic 40px serif;
      fill: red;
    }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>