Question

我目前正在尝试使用RaphaelJS添加一些动态添加的文本。我希望文本突破200像素，然后继续下一行。就像你有一个宽度为HTML的常规DIV一样。

我尝试过类似的事情：

.text {
    width: 200px;
    max-width: 200px; //and this
}

但不幸的是，它不是如何运作的。有谁知道我怎么能做到这一点？我知道在文本中添加\n会创建一个新行，但我不确定如何实现我想要的目标。

Answer 1

Snap.svg的

I found an answer我已经修改了一下。然而，它完美无缺。

function text(x, y, txt, max_width, element_class) {
    var abc = "abcdefghijklmnopqrstuvwxyzæøåABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ";
    var temp = rsr.text(50, 50, abc);
    temp.node.classList.add("text");
    var letter_width = temp.getBBox().width / abc.length;
    temp.remove();

    var heights = [];

    var loopLines = txt.split("\n");
    for (j = 0; j < loopLines.length; j++) {
        var words = loopLines[j].split(" ");
        var width_so_far = 0,
            current_line = 0,
            lines = [''];
        for (var i = 0; i < words.length; i++) {
            var l = words[i].length;
            if (width_so_far + (l * letter_width) > max_width) {
                lines.push('');
                current_line++;
                width_so_far = 0;
            }
            width_so_far += l * letter_width;
            lines[current_line] += words[i] + " ";
        }

        if (j > 0) {
            y += heights[j - 1];
        }

        lines = lines.join("\n");
        var t = rsr.text(x, y, lines);
        $(t.node).find("tspan").attr("dy", "1.2em");
        t.node.classList.add(element_class);
        heights.push(t.getBBox().height);
    }
}

需要jQuery，因为我正在使用jQuery进行find("tspan")（也许，因为我也在其他地方使用它）。

我已将其修改为现在支持字符串中的\n。

Answer 2

SVG没有自动文字换行功能。不管怎么说，不是现在的版本。

您必须自己将文本拆分为行。或者，如果要在浏览器中显示SVG，则可以选择在SVG中嵌入HTML。您可以使用<foreignObject>元素执行此操作。

我不确定Raphael是否有用于创建foreignObject元素的API。您需要进行调查。

在RaphaelJS中自动将文本换行到宽度？

2 个答案: