Question

我想在IE9中使用javascript创建svg，所以我使用了document.craeteElementNS方法。它在其他浏览器中工作正常但不是IE9。我能知道为什么吗？这是一个文档，说明该方法应该与IE9一起使用， http://msdn.microsoft.com/en-us/library/ie/ff975213%28v=vs.85%29.aspx 但是当我尝试它时，它没有，我可以知道为什么吗？
Result: It doesn't shows the polygon on the page that it should be, it just convey a blank page

 <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(window).load(function(){
       var myDiv = document.getElementById("myDiv");
       var mySVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       mySVG.setAttribute("height","210");
       mySVG.setAttribute("width","500")
       myDiv.appendChild(mySVG);
       var myPolygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");   
       myPolygon.setAttribute("style","fill:lime;stroke:purple;stroke-width:1");
       myPolygon.setAttribute("points","200,10 250,190 160,210");
       mySVG.appendChild(myPolygon);
        });         
    </script>
    </head>
    <body>
    <div id="myDiv">

    </div>

    </body>
    </html>

Answer 1

$(document).ready(function(){
    var myDiv = document.getElementById("myDiv");
       var mySVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       mySVG.setAttribute("height","210");
       mySVG.setAttribute("width","500");
       myDiv.appendChild(mySVG);
    var obj = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    //obj.setAttributeNS(null, "cx", 100);
    //obj.setAttributeNS(null, "cy", 50);
    //obj.setAttributeNS(null, "r",  40);
    obj.setAttributeNS(null, "stroke", "purple");
    obj.setAttributeNS(null, "stroke-width", 1);
    obj.setAttributeNS(null, "fill", "lime");
    obj.setAttributeNS(null, "points", "200,10 250,190 160,210");
    mySVG.appendChild(obj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="myDiv"></div>

document.createElementNS方法不适用于IE9

1 个答案: