svgのtextPath要素を使ってフリースタイルのテキストレイアウトを実現する

svgのtextPath要素を使うと，これまで面倒だったテキストを三角形の領域に並べると言ったことも簡単に行える．

まずはどのような効果なのか見てもらおう．

従来のhtmlでこれと同じような効果を得るには，まず（１）テキストを分解し，（２）それぞれをspan要素やdiv要素で囲み，（３）スタイルシートで幅とポジションを調整するといった手順を踏むことが考えられる．
だがこのやり方ではテキストの内容が変化したり，フォントの変更に伴い毎回レイアウトの調整作業を行わなければならない．
一方，svgを用いた場合はサンプルコードを見ると判るように，テキストを分解すること無く実現されている．
textPath要素は任意のpathに沿ってテキストを配置するもので，テキストを波打たせたり，リング上に配置させることができる．このとき，pathを跳び跳びとなるように定義すると，テキストも跳び跳びに配置されるのだ．

<svg width="220px" height="220px" viewBox="-10 0 220 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <path id="tri-path" d="
   M 0,20 h 20 
   m -20,20 h 40 
   m -40,20 h 60 
   m -60,20 h 80 
   m -80,20 h 100 
   m -100,20 h 120 
   m -120,20 h 140
   m -140,20 h 160
   m -160,20 h 180
   m -180,20 h 200"/>
 </defs>
 <text font-size="15"><textPath xlink:href="#tri-path">
寿限無、寿限無 五劫の擦り切れ
海砂利水魚の
水行末 雲来末 風来末
食う寝る処に住む処
やぶら小路の藪柑子
パイポパイポ パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の長助</textPath></text>
</svg>
 

その一方，見た目の改行は厳密な意味での改行ではない．段落を含むようなテキストについては段落毎にpathを定義するなどの対処をすることとなる．