Создайте несколько строк текста с помощью Snap.svg

Question

Мне не удалось выяснить, как создать несколько строк текста с единственным элементом paper.text в Snap.svg. Я попытался использовать методы, упомянутые для raphael.js, такие как \ n, но это не делает ничего для snap.svg.

Я попытался использовать
, \ n и варианты этого, но ничего не работает. Мне показалось странным, что это так легко сделать в raphael.js (это в документации), но все же snap.svg docs ничего об этом не упоминают, и в Интернете я ничего не нашел.

Справка была бы очень признательна, спасибо!

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: Вот 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)}); 
    });