尝试使用for循环绘制SVG图形。

Question

尝试使用for循环绘制SVG图形。

11

我刚开始学习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>

- user2703522

1

您需要单独提出后续问题，以免使现有答案无效。 - Robert Longson

2个回答

5

这比你的示例复杂一些。在这里，我将你的伪代码转换成了JavaScript代码的fiddle（JSFiddle链接）。如果你正在使用一些服务器端渲染（如.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);

- Grissom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

不能直接将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.中找到，它是http://www.w3.org/2000/svg。这看起来很复杂，但是需要记住并且只是必要的。
设置circle属性：现在是属性部分：我使用.setAttribute()设置位置cx和cy。您可以尝试以不同的位置定位它们。我还设置了大小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);
  };
});

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