Create multiple lines of text using Snap.svg

Question

I was not able to figure out how to create multiple lines of text with a single paper.text element in Snap.svg. I tried using the methods mentioned for raphael.js, such as \ n, but this does nothing for snap.svg.

I tried using \ n and variants of this, but nothing works. It seemed strange to me that it is very easy to do in raphael.js (this is in the documentation), but still snap.svg docs do not mention anything about it, and I did not find anything on the Internet.

Help would be greatly appreciated, thanks!

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's the jsfiddle where \ n works for raphael. Since snap.svg is not built into jsfiddle, I don't know that another fiddle will help anyone. http://jsfiddle.net/yf8364mp/

Answer 1

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

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