Erstellen Sie mehrere Zeilen Text mit Snap.svg

Question

Ich konnte nicht herausfinden, wie mehrere Textzeilen mit einem einzigen Papier.Text Element in Snap.svg erstellt werden. Ich habe versucht, die Techniken zu verwenden, die für raphael.js erwähnt werden, wie \ n, aber das tut nichts für snap.svg.

Ich habe versucht mit
, \ n, und Variationen davon, aber nichts funktioniert. Ich finde es merkwürdig, dass es in raphael.js so einfach zu machen ist (es ist in der Dokumentation), aber Snap.svg Docs erwähnen nichts darüber, und die Suche im Internet fand ich nichts.

Hilfe wäre sehr dankbar, danke!

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: Hier ist ein jsfiddle wo \ n für raphael arbeiten. Da snap.svg nicht in jsfiddle eingebaut ist, weiß ich nicht, dass die andere Geige jemandem viel helfen wird. http://jsfiddle.net/yf8364mp/

Answer 1

Um mehrzeiligen Text mit Snap.svg zu zeichnen ist ein bisschen lästig.
Wenn Sie die Paper.text-Methode mit String-Array aufrufen, erstellt Snap.svg tspan-Elemente unter dem Textelement.
Wenn Sie das Textelement als Mehrfachlinie anzeigen möchten, sollten Sie die Position für jedes tspan-Element manuell festlegen.

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