SVGのテキストを自動改行させる方法

クロスブラウザで自動改行

クロスブラウザで、プログラミングの知識がない人でも、SVGで自動改行できるよ、というお話です。
以下のSVGをご覧下さい。


    
    

      <html xmlns="http://www.w3.org/xhtml/1999">
      
      <div style="width:100px;height:100px;font-size:20px">Hello, World! ありがとう、さようなら。それから、こんごともよろしく</div>

これを、インラインSVGでも、単独のSVGでも何でもいいので、ブラウザで表示すると、div要素の文字列が自動改行されているはずです。
とりあえず、Firefox23とOpera17で確認ました。

注意点

テキストを文字列ではなく、画像として扱いたいときには、上の方法ではなくて、text要素とtspan要素をお使いください。tspan要素はx属性と、dy属性だけで単一行を設定できます。
あと、ネットで、textArea要素が標準のような記述がありますが、W3CのSVG1.1 2nd (注1)の最新の仕様に入っていません。そのため、これからもブラウザでサポートされることはありませんので、使わないようにしてください。

結論

  1. textArea要素は最新の仕様に入っていませんので、使うのは危険
  2. foreignObject要素を使うと、基本的に、HTMLの機能はほとんど使えます
  3. text要素は文字列を画像化したいときに使うと便利

参考

注1　Scalable Vector Graphics (SVG) 1.1 (Second Edition)

Second Editionは2011年に公開された仕様
http://www.w3.org/TR/SVG11/