js动态生成的inline svg无法显示

如下代码，原有的一个circle可以显示，新生成的不显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf8" lang="utf8">
  <head>  
  </head>
  <body>
      <svg
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 version="1.0" width="100" height="100" id="svg2"
 >
<circle id="c1" cx="50px" cy="50px" r="5px" fill="#ffffff" stroke="#000000" stroke-width="2px"/>
      </svg>
  </body>
  <script id="script" type="text/javascript">
    var svg2 = document.getElementById('svg2');
    var circle = document.createElementNS('http://www.w3.org/2000/svg',"circle");
    circle.setAttributeNS('null','cx',10+'px');
    circle.setAttributeNS('null','cy',20+'px');
    circle.setAttributeNS('null','r','5px');
    circle.id = 'c2';
    circle.setAttributeNS('null','fill','#ffffff');
    circle.setAttributeNS('null','stroke','#000000');
    circle.setAttributeNS('null','stroke-width','2px');
    svg2.appendChild(circle);  </script>
</html>