एसवीजी पथ

Question

के केंद्र में पाठ कैसे रखें एसवीजी को प्रतिपादित करने के लिए मैं jQuery एसवीजी प्लगइन का उपयोग कर रहा हूं। और, अब मैं प्रत्येक पथ और बहुभुज में पाठ जोड़ना चाहता हूं। jsFiddle पर आप प्लगइन द्वारा जेनरेट मार्कअप देख सकते हैं।

पाठ बनाने के लिए मैं निम्नलिखित कोड लिखा है:

var svgg = $("#rsr").svg('get'); 
var texts = svgg.createText(); 
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go '). 
    span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }). 
    string(' then we go down, then up again')); 

jsFiddle पर कोड आप देख सकते हैं कि textpath टैग मौजूद है में, लेकिन वह दिखाई नहीं देता है। प्रत्येक पथ के केंद्र में पाठ कैसे जोड़ें?
धन्यवाद।

Answer 1

एक आकार की चोटी पर एक सीधी रेखा में पाठ रखने के लिए, boundingbox देखने के बीच में:

http://jsfiddle.net/dYuAA/114/

यह सिर्फ टेक्स्ट रखने का विकल्प कुछ जावास्क्रिप्ट कहते हैं।

function addText(p) 
{ 
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
    var b = p.getBBox(); 
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")"); 
    t.textContent = "a"; 
    t.setAttribute("fill", "red"); 
    t.setAttribute("font-size", "14"); 
    p.parentNode.insertBefore(t, p.nextSibling); 
} 

var paths = document.querySelectorAll("path"); 
for (var p in paths) 
{ 
    addText(paths[p]) 
} 

उपरोक्त केवल पथ तत्वों को देखता है, लेकिन आप चयनकर्ता को जो कुछ भी चाहिए उसे शामिल करने के लिए ट्विक कर सकते हैं।

Answer 2

यहां कुछ समस्याएं हैं।

ए) एसवीजी केस संवेदनशील है इसलिए यह टेक्स्टपैथ है और टेक्स्टपैथ नहीं है।

ख) textPath एक <text> तत्व में संलग्न किया जा करने के लिए वैध

यहाँ अपने jsFiddle fixed up है हो गया है।