SVGテキストの幅を測定して自動改行する方法（getBBox()活用）

getBBox()を使ったSVGテキストの自動折り返し

SVGのテキストボックス内で自動的に折り返し（ワードラップ）を実現するには、getBBox()関数を活用します。基本的な仕組みはシンプルで、テキストオブジェクトに単語を1つずつ追加していき、幅が最大値を超えた時点で改行コードを挿入するというものです。

実装の流れ

1. テキストをスペースで分割し、単語の配列を作成する
2. 単語を1つずつテキストに追加し、その都度getBBox()で幅を測定する
3. 幅がmaxWidthを超えたら改行文字\nを挿入する

サンプルコード（Raphael.js）

var a = Raphael(500, 500);
var b = a.text(100, 100).attr('text-anchor', 'start');
var maxWidth = 100;
var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec semper mauris. Sed gravida augue feugiat nulla ultrices efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sit amet lobortis eros, et lobortis diam. Aenean arcu velit, condimentum eu lacus in, dignissim bibendum odio. Mauris ultricies nunc et lorem bibendum dignissim. Ut porttitor purus vitae diam efficitur ultrices. Integer dignissim efficitur lorem, non vehicula diam scelerisque at";
var words = content.split(" ");
var tempText = "";

for (var i = 0; i < words.length; i++) {
    b.attr("text", tempText + " " + words[i]);
    if (b.getBBox().width > maxWidth) {
        tempText += "\n" + words[i];
    } else {
        tempText += " " + words[i];
    }
}
b.attr("text", tempText.substring(1));

コードのポイント

• text-anchorをstartに設定することで、左揃え基準で正確に幅を測定できます。
• Raphael.jsのtext要素は改行文字\nを認識し、自動的に複数行として描画されます。
• 最後にsubstring(1)で先頭の余分なスペースを取り除いてからテキストを設定しています。

なお、Raphael.jsを使わずに純粋なSVGの<text>要素で同様の処理を行う場合は、改行ごとに<tspan>要素を生成し、dy属性で行間を制御する必要があります。また、フォントの読み込みが完了する前に幅を測定すると誤った結果になるため、必要に応じてdocument.fonts.readyなどを待ってから処理を実行するとより確実です。