<text> 要素の中に <tspan> 要素を組み込むことで、テキストとフォントのプロパティ及び現在のテキストの位置を絶対値または相対値を用いた座標で調節することができます。

利用可能な場所

カテゴリーText content element 、 Text content child element
許可された内容文字データと任意の数の以下の要素を任意の順で:
説明的要素
<a><altGlyph><animate><animateColor><set><tref><tspan>

属性

グローバル属性

専用属性

DOM インターフェイス

この属性は SVGTSpanElement インターフェイスを実装します。

SVG

<?xml version="1.0"?>
<svg width="250" height="40" viewBox="0 0 250 40"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>
<![CDATA[
text{
  font: 20px Verdana, Helvetica, Arial, sans-serif;
}

tspan{
  fill: red;
  font-weight: bold
}
]]>
  </style>

  <text x="15" y="30">
    You are 
    <tspan>not</tspan> 
    a banana
  </text>
</svg>

結果

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<tspan> の定義
勧告候補  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<tspan> の定義
勧告 初回定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
tspanChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android ?
dxChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
dyChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
lengthAdjustChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rotateChrome 完全対応 ありEdge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
textLengthChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
xChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
yChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

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

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