0

我想使用 javascript onmouseup 事件创建 svg 矩形。我的问题是创建了矩形（通过萤火虫查看），但我无法查看它。谁能帮我。

点击这里

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);

  }
4

2 回答 2

0

除非它在一个元素中，否则你不能显示一个<rect>元素（或者通常是任何 SVG 元素）<svg>。如果你改变你的 html 让它看起来像这样......

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

这个对我有用

function doSomething() {    
  var svgns = "http://www.w3.org/2000/svg";
  var rect = document.createElementNS(svgns, 'rect');
  rect.setAttribute('x', '150');
  rect.setAttribute('y', '150');
  rect.setAttribute('height', '50');
  rect.setAttribute('width', '50');
  rect.setAttribute('fill', '#'+Math.round(0xffffff *         Math.random()).toString(16));
  document.getElementById('svgOne').appendChild(rect);
}
svg {
  position: absolute;
  top: 0px;
  left: 200px;
}
<div id="myImgId" style="width: 200px; height: 200px; background:#000;" onmouseup="doSomething()" onmousedown="return false;">
</div>
<svg id="svgOne" width="200" height="200"></svg>

于 2013-05-30T13:46:00.380 回答
0 
<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>

快乐编码:)

于 2021-01-22T07:35:23.997 回答