试图制作一个for循环来绘制一个svg

Question

试图制作一个for循环来绘制一个svg

我刚刚开始学习SVG,并想尝试制作一个for循环来在我的html中画出很多圈子.可以这样做,我试图这样做,还是我想做的不可能？

<html>
<body>

<h1>My first SVG for loop</h1>

<script type="text/javascript">

    var circlex = 50; 
    var circley = 50;

    for (var i = 0; i < 100; i++) {

    <svg width="100" height="100">
         <circle cx="circlex + 1" cy="circley + 1" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
    };

</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Per*_*ijn 6

你不能将 html 代码直接放入 JavaScript 中（那会很酷）
JavaScript 添加新元素的方式是通过 DOM 操作。
那么让我们来看看代码：

首先创建一个带有 xmlns 的空 SVG 文档（只需设置xmlns="http://www.w3.org/2000/svg"，它在 99% 的情况下都有效），我们需要一个 ID 来选择元素。
在 JavaScript 中获取 SVG 元素：document.getElementById("svg_circles"). 这里我们使用在元素上设置的 ID 将其保存到变量中。
在for循环中：创建一个circle元素：var circle = document.createElementNS(NS, "circle");命名空间NS位于1.it 's中http://www.w3.org/2000/svg。这看起来很复杂，但却是必要的，而且只是你必须记住的东西。
设置圆属性：现在到属性：我设置位置cx并cy使用.setAttribute()。您可以尝试以不同的方式放置它们。我还设置了大小r属性和填充（填充上的长行代码只是为了好玩，它会创建随机颜色）
现在我们已经完成了圆圈，但 JavaScript 代码不知道将它们放在哪里。所以我们告诉它：svgCircle.appendChild()将该元素设置为 SVG 文档的子元素。所以：svgCircle.appendChild(circle);其中circle是创建的SVG元素。

document.addEventListener("DOMContentLoaded", function(event) {
  var circlex = 0;
  var circley = 0;

  var svgCircle = document.getElementById("svg_circles");
  var NS = "http://www.w3.org/2000/svg";
  for (var i = 0; i < 100; i++) {
    var circle = document.createElementNS(NS, "circle");
    console.log(circle);
    circle.setAttribute("cx", circlex + i);
    circle.setAttribute("cy", circley + i);
    circle.setAttribute("r", 10);
    circle.setAttribute("fill", "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")");
    svgCircle.appendChild(circle);
  };
});

Run Code Online (Sandbox Code Playgroud)

<svg id="svg_circles" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Gri*_*som 5

它比您的示例稍微复杂一些。这是一个小提琴，我将您的伪代码转换为 javascript 代码。如果您使用一些服务器端渲染（例如 .NET MVC）然后迭代 svg 元素，则此方法可能没问题。但在 javascript 中，您需要创建 DOM 元素，传递配置，然后将其附加到 DOM。这是一个示例： https: //jsfiddle.net/9c7ro6x3/1/

  var circlex = 50;
  var circley = 50;

  var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
  for (var i = 0; i < 100; i++) {
   circlex = circlex + 1;
   circley = circley + 1;

   var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
   circle.setAttribute("cx", circlex);
   circle.setAttribute("cy", circley);
   circle.setAttribute("r", "40");
   circle.setAttribute("stroke", "green");
   circle.setAttribute("strokeWidth", 4);
   circle.setAttribute("fill", "yellow");
   svg.appendChild(circle);
};

document.body.appendChild(svg);

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	3383 次
最近记录：	10 年，5 月前