用Snap.svg創建多行文字

Question

我一直無法弄清楚如何用Snap.svg中的一個paper.text元素創建多行文本。我嘗試過使用raphael.js提到的技術，例如\ n，但是這對snap.svg沒有幫助。

我嘗試過使用
，\ n及其變體，但沒有任何效果。我覺得奇怪的是，在raphael.js（它在文檔中）很容易做到，但snap.svg文檔沒有提到任何有關這一點的信息，並且在網上搜索我什麼也沒找到。

幫助將非常感激，謝謝！

http://jsfiddle.net/f3mkqovm/

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

編輯：這裏是\ n爲工作拉斐爾的jsfiddle。由於snap.svg沒有內置到jsfiddle中，我不知道另一個小提琴會幫助任何人。 http://jsfiddle.net/yf8364mp/

Answer 1

用Snap.svg繪製多行文本有點麻煩。
當您使用字符串數組調用Paper.text方法時，Snap.svg會在文本元素下創建tspan元素。
如果要將文本元素顯示爲多行，則應手動設置每個tspan元素的位置。

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