javascript - Svg 打开时不会显示

Question

我目前正在进行一项编程作业，您需要创建一个随机模式生成器。到目前为止，我已经创建了一个显示矩形的图案。但我想把矩形改为圆形。当我将标签从 <rect> 更改时至<circle> Svg 不会显示。我不明白需要做什么才能将图案从矩形更改为圆形。

代码如下

 <svg id="mysvg" width="2500" height="1000"
 xmlns="http://www.w3.org/2000/svg" version="1.0">
 <script type="application/ecmascript"> <![CDATA[
  var mysvg = document.getElementById("mysvg");
  var num = 100;
  while (num-- > 0)
  {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
     rect.setAttribute("x", Math.random()*2000);
     rect.setAttribute("y", Math.random()*500);
     rect.setAttribute("width", "200");
     rect.setAttribute("height", "300");
     rect.setAttribute("style", "fill:blue;stroke:white;stroke-       width:2;opacity:1");
     mysvg.appendChild(rect);
}  
  ]]></script>
  </svg>

Answer 1

圆没有宽度和高度；它们有半径。

您设置了多余的 width 和 height 属性，但没有设置 r，默认为 0，使您的圆圈不可见。

同样，圆的中心位置由 cx 和 cy 定义，而不是 x 和 y。

所以:

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", Math.random()*2000);
circle.setAttribute("cy", Math.random()*500);
circle.setAttribute("r", "200");
circle.setAttribute("style", "fill: blue; stroke: white; stroke-width: 2; opacity: 1");
mysvg.appendChild(circle);

(live demo)

并养成简单咨询的习惯the documentation .