SVGについて – テキストについて(8)
tspan要素について調べてみます。
tspan要素は、長い文字列の中の一部分の文字列に対してマークアップするシーンで使用します。
text要素の子要素として定義します。
また、tspan要素の中にtspan要素を書いてネストにすることもできます。
以下、サンプルを用意しました。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="500" height="200" viewBox="0 0 500 200"> <text x="20" y="20" dx="0" dy="0" > テキストの <tspan x="30" y="80" dx="0" dy="10" fill="#00afff"> テ <tspan dx="5" dy="15" rotate="15" fill="#ff0000"> ス </tspan> <tspan dx="25" dy="30" rotate="30"> ト </tspan> </tspan> </text> </svg> </body> </html>
画面にアクセスすると、「テキストのテスト」という文字列が「テキストの」までは通常の横書きで出力され、
その後の「テ」「ス」「ト」にはtspanで定義したdx dy rotate fillがそれぞれ個別に影響して出力されていることがわかります。
また、ネストされている要素で、後半の「テスト」全体をfill要素で色の指定をしているので、
親要素の定義が子要素の定義に引き継がれて「テスト」全体が青色に着色されることがわかります。
ただし、2文字目の「ス」は個別にfill要素が定義されているので、その文字だけは赤色になります。
3文字目の「ト」については、親要素のfill属性を引き継いで青色で出力されています。