如何確定SVG文本框的寬度，或在'x'字符後強制換行符？

Question

我使用Raphael庫創建SVG文本框，並使用從XML文檔中提取的動態字符串填充該文本框。

有時候，這個字符串比我放置文本框的畫布長，所以我需要限制盒子的寬度，它本身會強制換行（我找不到任何這個存在的證據可能）或確保在一定數量的字符後插入'\ n'換行符。

所以（1）這是最好的選擇嗎？ （2）我會如何做到這一點？

Answer 1

沒有文字環繞的屬性，但有一個簡單的技巧可以使用。一次向文本對象添加一個單詞，當它太寬時，添加一個換行符。您可以使用getBBox（）函數來確定寬度。基本上，你模仿一個老式的打字機。這裏有一些代碼會爲你做這個事情。你可以很容易地把它變成一個簡單的函數，它接受文本和寬度。

var r = Raphael(500, 500); 
var t = r.text(100, 100).attr('text-anchor', 'start'); 
var maxWidth = 100; 

var content = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. "; 
var words = content.split(" "); 

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

t.attr("text", tempText.substring(1)); 

Answer 2

mark的解決方案對於大量文本（firefox 11）來說很慢。我認爲這是因爲爲了獲取BBOX，文本被重新渲染了幾次。下面的函數是大量文本更有效，但可能不太準確（代碼raphaelmarkup project）：

/** 
* @param t a raphael text shape 
* @param width - pixels to wrapp text width 
* modify t text adding new lines characters for wrapping it to given width. 
*/ 
rm._textWrapp = function(t, width) { 
    var content = t.attr("text"); 
    var abc="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
    t.attr({'text-anchor': 'start', "text": abc}); 
    var letterWidth=t.getBBox().width/abc.length; 
    t.attr({"text": content}); 
    var words = content.split(" "), x=0, s=[]; 
    for (var i = 0; i < words.length; i++) { 
     var l = words[i].length; 
     if(x+l>width) { 
      s.push("\n") 
      x=0; 
     } 
     else { 
      x+=l*letterWidth; 
     } 
     s.push(words[i]+" "); 
    } 
    t.attr({"text": s.join("")}); 
}; 

Answer 3

感謝您的回答。然而，我發現，我需要一些調整，爲我工作：

function textWrap(t, width) { 
    var content = t.attr("text"); 
    var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
    t.attr({ 
     'text-anchor' : 'start', 
     "text" : abc 
    }); 
    var letterWidth = t.getBBox().width/abc.length; 
    t.attr({ 
     "text" : content 
    }); 

    var words = content.split(" "); 
    var x = 0, s = []; 
    for (var i = 0; i < words.length; i++) { 

     var l = words[i].length; 
     if (x + (l * letterWidth) > width) { 
      s.push("\n"); 
      x = 0; 
     } 
     x += l * letterWidth; 
     s.push(words[i] + " "); 
    } 
    t.attr({ 
     "text" : s.join("") 
    }); 
} 

的變化是：

• 使用（L * letterwidth）所需要的比較......不只是升
• 的if/else語句改爲只是如果 - 這樣一個換行符將始終設置X 0
• ，總是新的L * letterwidth添加到x值

希望這有助於。

Answer 4

嗯，我解決它調整它一點點

var words = server.split(" "); 
var length = words.length; 
var temp_text = ""; 

for(var i = 0; i < length; i++) { 
    temp_text = temp_text + ' ' + words[i]; 
    t.attr("text", temp_text); 

    if(t.getBBox().width > width) { 
     temp_text = temp_text.replace(/(*)(\w+)$/, "\n$2"); 
    } 
} 

t.attr("text", temp_text.trim()); 

Answer 5

我知道它現在是有點慢半拍，但你可能有興趣在我Raphael-paragraph項目，它會自動完成。

Raphael-paragraph允許您創建具有最大寬度和高度約束，行高和文本樣式配置的自動包裝多行文本。如果它們超過垂直邊界，它可以連字符連字符並截斷它們。它仍然是一個測試版，需要很多優化，但它應該適用於您的目的。

GitHub頁面上提供了使用示例和文檔。