CODEWITHSUNDEEP
javascriptsvgsnap.svg
cracker
cracker

Reputation: 53

Create multiple lines of text with Snap.svg

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/

Upvotes: 5

Views: 4368

Answers (2)

Blaine
Blaine

Reputation: 1586

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

Upvotes: 0

defghi1977
defghi1977

Reputation: 5349

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

Upvotes: 14

Related Questions