<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.
SVG の <text> 要素は、テキストからなるグラフィク要素を定義します。<text> には、他の SVG グラフィク要素と同じように、グラデーション、パターン、クリッピングパス、マスク、フィルターなどを適用することができます。
SVG 内でテキストが <text> 要素内以外で組み込まれた場合、レンダリングされません。これは既定でで隠されるのとは違い、display を変更してもテキストは表示されません。
メモ:
既定では <text> 要素は折り返されません。これを実現するには white-space でスタイル設定する必要があります。CSS プロパティを使用する必要があります。
例
<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 |
ブラウザーの互換性
BCD tables only load in the browser