Create multiple lines of text with Snap.svg

Question

I have not been able to figure out how to create multiple lines of text with a single paper.text element in Snap.svg. I have tried using the techniques mentioned for raphael.js, such as \n, but that doesn't do a thing for snap.svg.

I have tried using
, \n, and variations of that, but nothing works. I find it odd that it is so easy to do in raphael.js, (it's in the documentation), but yet snap.svg docs don't mention anything about this, and searching the web I found nothing.

Help would be very appreciated, thank you!

http://jsfiddle.net/f3mkqovm/

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

EDIT: Here is a jsfiddle where \n is working for raphael. Since snap.svg is not built into jsfiddle, I don't know that the other fiddle will help anyone much. http://jsfiddle.net/yf8364mp/

Answer 1

To draw multi line text with Snap.svg is a bit bother.
When you call Paper.text method with string array, Snap.svg creates tspan elements under the text element.
If you want to display the text element as multi line, you should set position to each tspan element manually.

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)});
   });