<tspan>

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 の <tspan> 要素は、 <text> 要素内にあるサブテキストやその他の <tspan> 要素を定義します。これにより、必要に応じてサブテキストのスタイルや位置を調整することができます。

html
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font: italic 12px serif;
    }
    tspan {
      font: bold 10px sans-serif;
      fill: red;
    }
  </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>

属性

x

テキストのベースラインの開始点の X 座標です。 値の型: <length>|<percentage> ; 既定値: none; Animatable: yes

y

テキストのベースラインの開始点の Y 座標です。 値の型: <length>|<percentage> ; 既定値: none; Animatable: yes

dx

テキストの位置を直前のテキスト要素から水平方向にずらします。 値の型: <length>|<percentage> ; Default value: none; Animatable: yes

dy

テキストの位置を直前のテキスト要素から垂直方向にずらします。 値の型: <length>|<percentage> ; 既定値: none; Animatable: yes

rotate

それぞれの文字の向きを回転します。文字ごとに個別に回転させることができます。 値の型: <list-of-number> ; 既定値: none; Animatable: yes

lengthAdjust

テキストをtextLength 属性で定義された幅に合わせるために伸縮する方法です。 値の型: spacing|spacingAndGlyphs; 既定値: spacing; Animatable: yes

textLength

テキストを伸縮して合わせる幅です。 値の型: <length>|<percentage> ; 既定値: none; Animatable: yes

グローバル属性

コア属性

特に: id, tabindex

スタイル属性

class, style

条件処理属性

特に: requiredExtensions, systemLanguage

Event Attributes

グローバルイベント属性, グラフィックイベント属性

プレゼンテーション属性

特に: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility

Aria 属性

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

使用場面

カテゴリーテキストコンテンツ要素、テキストコンテンツの子要素
許可されている内容任意の順で文字データと任意の数の以下の要素。
説明的要素
<a><animate><set><tref><tspan>

仕様書

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
tspan
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