Cài đặt phần tử svg động qua javascript

Question

Tôi đang tạo các phần tử SVG thông qua javascript, và nó hoạt động tốt, nhưng khi tôi tạo một phần tử svg văn bản và xác định nội dung của nó, trình duyệt chỉ không hiển thị giá trị, mặc dù giá trị là trong mã khi tôi kiểm tra nó bằng firebug.

Mã này là:

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); 

Dưới đây là liên kết jsfiddle http://jsfiddle.net/sAhyC/ Nếu bạn kiểm tra việc svg bạn sẽ thấy giá trị của các yếu tố văn bản đó, nhưng trình duyệt không render nó.

Cảm ơn

Answer 1

Bạn đang ngắn một "h" trong không gian tên của bạn

Đã

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

nên

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>