Question

我想使用javascript onmouseup事件创建svg矩形。我的问题是矩形创建（通过firebug查看），但我无法查看它。任何人都可以帮助我。

function doSomething()
  { 
var svgns = "http://www.w3.org/2000/svg";
        var rect = document.createElementNS(svgns, 'rect');
        rect.setAttributeNS(null, 'x', '150');
        rect.setAttributeNS(null, 'y', '150');
        rect.setAttributeNS(null, 'height', '50');
        rect.setAttributeNS(null, 'width', '50');
        rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff *         Math.random()).toString(16));
        document.getElementById('svgOne').appendChild(rect);

  }

Answer 1

您不能显示<rect>元素（或通常任何SVG元素），除非它在<svg>元素内。如果你改变你的html，使它看起来像这样......

<svg id="svgOne" width="200" height="200"></svg>

works for me

请注意，window.doSomething更改只是一个让javascript可以从标记调用的东西。

Answer 2

<html>
  <head>
  </head>
  <body>
    <div id="didiyeu"></div>
    <script>
      function kotak(){
         // create svg tag
         var induk = document.createElementNS("http://www.w3.org/2000/svg","svg");
         // create svg element rectangle
         var kotak = document.createElementNS("http://www.w3.org/2000/svg","rect");
         // put some attibutes
             kotak.setAttribute("width","80");
             kotak.setAttribute("height","80");
         // put rectangle to svg element/tag called induk
            induk.appendChild(kotak);
         // then put into html
            document.getElementById("didiyeu").appendChild(induk);
      }
      // call the function
      kotak();
    </script>
  </body>
</html>

编码愉快:)

使用javascript事件创建svg矩形

2 个答案: