使用Snap.svg创建多行文本

Question

我无法弄清楚如何使用Snap.svg中的一个paper.text元素创建多行文本.我尝试过使用raphael.js提到的技术,例如\n,但这对snap.svg没有用处.

我尝试过使用
,\n和变体,但没有任何作用.我觉得奇怪的是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'
});

编辑:这是一个jsfiddle,其中\n正在为raphael工作.由于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)});
   });