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/

score 14 · Accepted Answer · answered Sep 19 '14 at 23:50

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

forEach would be simpler if dy were used: ...forEach(function(ts) { ts.attr({x:0, dy:25}); }); — Blaine, Oct 22 '20 at 06:43

Blaine · Answer 2 · 2020-10-22T15:06:25.657

Rename plugin function to whatever you like:

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

Then invoke it from any ancestor element, such as a text element:

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

To apply same offset and spacing to multiple texts... (There may be a way to support selectAll directly via plugin, but I can find no documentation or examples of that).

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

Create multiple lines of text with Snap.svg

2 Answers2