如何确定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

谢谢你的回答.但是,我发现我需要做一些调整才能适合我:

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)...而不仅仅是l
• if/else更改为if - 所以换行符总是将X设置为0
• 并始终将新的l*letterwidth添加到x值

希望这可以帮助.