javascript - 使用 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