<text>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

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

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

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .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>

属性

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; アニメーション:

使用可能な場所

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# TextElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text
dx
dy
fill
context-fill value
lengthAdjust
rotate
systemLanguage
textLength
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連項目

関連情報