SVG 用JS动态生成的无法显示，请问是什么原因呢

<html>
<head>
  <title>SVG within XHTML Demo</title>
   <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script></head>
<BODY>
<div id="svg22">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"><polygon style="fill:#cccccc;  stroke:#000000;stroke-width:1" points="542,107,559,129,569,128,552,99,562,89,590,98,595,91,561,79,567,70,599,78,606,74,563,61,545,80,539,97,520,90,517,94,514,116,543,126,559,150,568,148,567,128"></polygon></svg> 
 </div><SCRIPT language="JavaScript"> 
 
   newsvg=document.createElement('svg');
  newsvg.setAttribute('xmlns','http://www.w3.org/2000/svg');
  newsvg.setAttribute('version','1.1');
                     newsvg.setAttribute('width','100%');
 newsvg.setAttribute('height','100%');
     
 shape = document.createElement("polygon");
 shape.setAttribute('style','fill:#cccccc;  stroke:#000000;stroke-width:1');
  shape.setAttribute('points','542,107,559,129,569,128,552,99,562,89,590,98,595,91,561,79,567,70,599,78,606,74,563,61,545,80,539,97,520,90,517,94,514,116,543,126,559,150,568,148,567,128');
newsvg.appendChild(shape)
   document.getElementById('svg22').appendChild(newsvg);
  </SCRIPT> </BODY>
</HTML>代码如上，我用JS生成一摸一样的SVG就是显示不了，但是如果直接将内容放在页面上就可以显示，不知道是什么原因，有没有大大遇到过？

解决方案 »

  1.   

    <html>
    <head>
      <title>SVG within XHTML Demo</title>
    </head>
    <BODY>
    <div id="svg22">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"><polygon style="fill:#cccccc; stroke:#000000;stroke-width:1" points="542,107,559,129,569,128,552,99,562,89,590,98,595,91,561,79,567,70,599,78,606,74,563,61,545,80,539,97,520,90,517,94,514,116,543,126,559,150,568,148,567,128"></polygon></svg> 
     </div>
    </body>
    </html>
    就是我直接運行這個代碼是正常顯示的
      

  2.   

    <html>
    <head>
      <title>SVG within XHTML Demo</title>
      <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script></head>
    <BODY>
    <div id="svg22">
    <!-- 動態生成 -->
     </div><SCRIPT language="JavaScript"> 
     
      newsvg=document.createElement('svg');
    newsvg.setAttribute('xmlns','http://www.w3.org/2000/svg');
    newsvg.setAttribute('version','1.1');
      newsvg.setAttribute('width','100%');
    newsvg.setAttribute('height','100%');
     
    shape = document.createElement("polygon");
    shape.setAttribute('style','fill:#cccccc; stroke:#000000;stroke-width:1');
      shape.setAttribute('points','542,107,559,129,569,128,552,99,562,89,590,98,595,91,561,79,567,70,599,78,606,74,563,61,545,80,539,97,520,90,517,94,514,116,543,126,559,150,568,148,567,128');
    newsvg.appendChild(shape)
    document.getElementById('svg22').appendChild(newsvg);
      </SCRIPT> </BODY>
    </HTML>
    改成用JS這樣生成就無法顯示
      

  3.   

    将你创建dom的语句改成下面这样试试
    document.createElementNS(‘http://www.w3.org/2000/svg’，'svg')；
    这是我关于svg和vml的看法，可以一起讨论一下：
    http://blog.csdn.net/a569171010/article/details/7546205