Question

    <html>

    <script language="JavaScript" type="text/javascript">

    function asdf()
    {
     var a = document.createElementNS("http://www.w3.org/2000/svg", "circle");
     a.setAttributeNS(null, "cx", "10");
     a.setAttributeNS(null, "cy", "10");
     a.setAttributeNS(null, "r", "100");
     a.setAttributeNS(null, "id", "circle");
     a.setAttributeNS(null, "fill", "rgb(0,0,255)");
     a.setAttributeNS(null, "visibility", "visible");
     document.getElementById("svg").appendChild(a);

     var b = document.createElementNS("http://www.w3.org/2000/svg", "line");
     b.setAttributeNS(null, "x1", "0");
     b.setAttributeNS(null, "y1", "140");
     b.setAttributeNS(null, "x2", "720");
     b.setAttributeNS(null, "y2", "140");
     b.setAttributeNS(null, "id", "line");
     b.setAttributeNS(null, "stroke", "black");
     b.setAttributeNS(null, "visibility", "visible");
     document.getElementById("svg").appendChild(b);
    }

    function roll()
    {
      var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      c.setAttributeNS(null, "cx", "10");
      c.setAttributeNS(null, "cy", "10");
      c.setAttributeNS(null, "r", "100");
      c.setAttributeNS(null, "id", "circle2");
      c.setAttributeNS(null, "fill", "rgb(0,0,255)");
      document.getElementById("svg").appendChild(c);
    }
    </script>

    <body onLoad="asdf()">
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">

    </svg>
    <input type='button' value='roll' onClick='roll()'>
    </body>

    </html>

我正在尝试将2个不同的svg对象附加到主页面，roll（）意味着作为一种svg格式化方法，将另一行附加到第一个创建的圆圈并将其移动为我在屏幕上移动圆圈 - 充当可见性的辐条。

我的问题是，虽然我认为这应该按预期工作，但显然不适合我，因为我无法看到我正在创造的物体！

提前谢谢，尽管我知道这有点懒惰 - 谢谢你：D

SVG追加 - 这应该工作，它很简单：X

0 个答案: