2014-09-19 18 views
5

Snap.svg'de tek bir paper.text öğesiyle birden fazla metin satırı oluşturmayı nasıl başaramadım. \ N gibi raphael.js için belirtilen teknikleri kullanmayı denedim, ancak bu snap.svg için bir şey yapmaz.Snap.svg ile çok sayıda metin satırı oluşturun


, \ n'yi ve bunun varyasyonlarını kullanmayı denedim, ancak hiçbir şey işe yaramıyor. Ben raphael.js içinde yapmak çok kolay, garip buluyorum, (bu belgelerin içinde), ancak henüz snap.svg docs bu konuda hiçbir şey bahsetmiyorum ve web arama hiçbir şey bulunamadı.

Yardım çok memnun olur, teşekkürler!

http://jsfiddle.net/f3mkqovm/

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

DÜZENLEME: İşte \ N raphael için çalışan bir jsfiddle olduğunu. Snap.svg jsfiddle içine kurulmadığından, diğer kemanın kimseye çok yardımcı olacağını bilmiyorum. http://jsfiddle.net/yf8364mp/

cevap

13

Snap.svg ile çok satırlı metin çizmek biraz rahatsız oluyor.
Dize dizisiyle Paper.text yöntemini çağırdığınızda, Snap.svg metin öğesi altında tspan öğeleri oluşturur.
Metin öğesini çok satırlı olarak görüntülemek isterseniz, her bir tspan öğesine manuel olarak konum belirlemeniz gerekir.

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

Çok teşekkür ederim. Sadece ihtiyacım olan şey! – cracker

İlgili konular