जावास्क्रिप्ट

Question

के माध्यम से गतिशील रूप से पाठ svg तत्व सेट करना मैं जावास्क्रिप्ट के माध्यम से एसवीजी तत्व बना रहा हूं, और यह ठीक काम करता है, लेकिन जब मैं एक पाठ svg तत्व बनाता हूं और इसकी सामग्री को परिभाषित करता हूं, तो ब्राउज़र मान के बावजूद मूल्य प्रस्तुत नहीं करता है कोड में जब मैं फ़ायरबग के साथ इसका निरीक्षण करता हूं।

कोड है:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
svg.setAttribute('xlink','http://www.w3.org/1999/xlink'); 
svg.setAttribute('width','187'); 
svg.setAttribute('height','234'); 

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
rect.setAttribute('width','187'); 
rect.setAttribute('height','234'); 
rect.setAttribute('fill','#fff'); 
rect.setAttribute('stroke','#000'); 
rect.setAttribute('stroke-width','2'); 
rect.setAttribute('rx','7'); 

var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text'); 
text.setAttribute('x', '10'); 
text.setAttribute('y', '20'); 
text.setAttribute('fill', '#000'); 
text.textContent = '2'; 

svg.appendChild(rect); 
svg.appendChild(text); 

var wp = document.getElementById('wrapper'); 
wp.appendChild(svg); 

यहाँ आप svg तुम वहाँ पाठ तत्व का मान देखेंगे निरीक्षण, लेकिन ब्राउज़र यह प्रस्तुत नहीं होती है jsfiddle लिंक http://jsfiddle.net/sAhyC/ है।

धन्यवाद

Answer 1

आप अपने नाम स्थान

था में एक "h" कम कर रहे हैं

var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text'); 

होना चाहिए

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 

Answer 2

function createText() { 

    var newText = document.createElementNS(svgNS,"text"); 
    newText.setAttributeNS(null,"x",20);  
    newText.setAttributeNS(null,"y",100); 
    var textNode = document.createTextNode("milind morey"); 
    newText.appendChild(textNode); 
    document.getElementById("firstGroup").appendChild(newText); 
} 

---

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">  
     <g id="firstGroup"> 

    <text x="20" y="45" onclick="createText();" font-size=+13px">Click on this text to create a new text.</text> 

    </g> 
     </svg>