Tworzenie wielu wierszy tekstu za pomocą Snap.svg

Question

Nie byłem w stanie dowiedzieć się, jak utworzyć wiele linii tekstu za pomocą jednego elementu paper.text w Snap.svg. Próbowałem użyć technik wymienionych dla raphael.js, takich jak \ n, ale to nie robi nic dla snap.svg.

Próbowałem użyć
, \ n i odmiany tego, ale nic nie działa. Uważam za dziwne, że tak łatwo jest zrobić w raphael.js (jest to w dokumentacji), ale dokumenty snap.svg nic o tym nie mówią, a przeszukując internet nic nie znalazłem.

Pomoc byłaby bardzo ceniona, dziękuję!

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: Tutaj jest jsfiddle gdzie \ n pracuje dla Rafaela. Ponieważ snap.svg nie jest wbudowany w jsfiddle, nie wiem, że inne skrzypce pomogą każdemu. http://jsfiddle.net/yf8364mp/

Answer 1

Rysowanie tekstu wielowierszowego za pomocą Snap.svg jest nieco kłopotliwe.
Po wywołaniu metody Paper.text z ciągiem znaków Snap.svg tworzy elementy tspan w elemencie tekstowym.
Jeśli chcesz wyświetlić element tekstowy jako linię wieloliniową, musisz ręcznie ustawić pozycję dla każdego elementu 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)}); 
    });