用Snap.svg创建多行文本

Question

我还没有弄清楚如何在paper.text中使用单个Snap.svg元素创建多行文本。我尝试过使用raphael.js中提到的技术，例如\n，但这对snap.svg没有任何作用。

我试过用

和各种变体，但都不起作用。我感到奇怪的是，在raphael.js中这么容易(在文档中)，但是snap.svg文档没有提到这一点，而且我什么也没找到。

非常感谢您的帮助，谢谢！

http://jsfiddle.net/f3mkqovm/

var myRect = paper.text(100, 100, ["Lorem",
    "<br>","ipsum dolor sit \n amet /n see ", "\n","amend"]).attr({
    fill : 'black'
});

编辑:这里是拉斐尔工作的摇摆不定的地方。由于snap.svg不是内置在jsfiddle中的，所以我不知道另一个小提琴会对任何人有多大帮助。http://jsfiddle.net/yf8364mp/

Answer 1

用Snap.svg绘制多行文本有点麻烦。

使用字符串数组调用Paper.text方法时，Snap.svg将在text元素下创建tspan元素。

如果要将文本元素显示为多行，则应手动将位置设置为每个tspan元素。

var paper = Snap(200,200);
paper.text({text:["Line1", "Line2", "Line3"]})
   .attr({fill:"black", fontSize:"18px"})
   .selectAll("tspan").forEach(function(tspan, i){
      tspan.attr({x:0, y:25*(i+1)});
   });

Answer 2

将插件函数重命名为您喜欢的任何功能：

Snap.plugin(function(Snap, Element, Paper, global) {
    Element.prototype.layoutTspans = function(xOffset, vSpacing) {
        this.selectAll("tspan").forEach(function(ts) {
            ts.attr({x: parseInt(ts.parent().attr("x")) + xOffset, dy: vSpacing});
        });
    };
});

然后从任何祖先元素(例如文本元素)调用它：

snap.select("#t1").layoutTspans(13, 20);

对多个文本使用相同的偏移量和间距.(可能有一种方法可以通过插件直接支持selectAll，但我没有找到任何文档或示例)。

snap.selectAll("g.badge").forEach(function(el) { el.layoutTspans(13, 20); });