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

圈子没有宽度和高度;他们有 radius 。

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

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

所以：

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的习惯。

Svg打开时不显示

1 个答案:

（live demo）