Элемент, созданный с помощью createElementNS, не показывает

Question

Я пытаюсь создать новый <img> с тегом <svg> с JavaScript при каждом нажатии кнопки. Когда я вижу результат в консольном firebug, он работает правильно, но ничего не отображается на экране. Я хочу, чтобы изображение <svg> появлялось после последнего при каждом нажатии кнопки.

Заранее спасибо.

var svgNS = "http://www.w3.org/2000/svg"; 

mybtn.addEventListener("click", createCircleSVG); 


    function createCircleSVG(){ 
     var d = document.createElement('svg'); 
     d.setAttribute('id','mySVG'); 

     document.getElementById("svgContainer").appendChild(d); 
     createCircle(); 
    }  

function createCircle(){ 

     var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle." 
     myCircle.setAttributeNS(null,"id","mycircle" + opCounter++); 
     myCircle.setAttributeNS(null,"cx",25); 
     myCircle.setAttributeNS(null,"cy",25); 
     myCircle.setAttributeNS(null,"r",100); 
     myCircle.setAttributeNS(null,"fill","black"); 
     myCircle.setAttributeNS(null,"stroke","blue"); 

     document.getElementById("mySVG").appendChild(myCircle); 
    } 

Answer 1

Создание SVG:

var svg = document.createElementNS(ns, 'svg'); 

Первая функция:

function createSVG() { ... } 

Вторая функция:

function createSVGCircle() { createSVG() ... } 

Или отделенный:

createSVG(); 
createSVGCircle(); 

Example

Answer 2

Вам нужно создать элемент Г в пространстве имен SVG с помощью createElementNS (как вы уже делаете для круга), например,

var d = document.createElementNS(svgNS, 'svg'); 

давая SVG элемент ширину и высоту также необходимо

d.setAttribute("width", "100%"); 
    d.setAttribute("height", "100%"); 

Примечание здесь мы можем использовать SetAttribute как атрибуты в нулевом пространстве имен. Вы также можете конвертировать вызовы setAttributeNS круга, если хотите.