到目前为止如此接近

Question

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

Answer 1

它比你的例子有点复杂，这里是我将伪代码转换为js代码的小提琴。如果你使用一些服务器端渲染，这种方法可能没问题。 .net mvc和迭代svg元素。但是在js中你需要创建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);

Answer 2

到目前为止如此接近

你不能将html代码直接放入javascript（这很酷） javascript添加新元素的方式是通过dom操作让我们来看看代码：

首先使用xmlns创建一个空的svg文档（只需设置xmlns =＆＃34; http：//www.w3.org/2000/svg" 99％的时间都可以工作）我们需要一个ID选择元素。
在javascript中获取svg元素：document.getElementById（＆＃34; svg_circles＆＃34;）。这里我们使用我们在元素上设置的id将其保存到变量。
在foorloop中：创建一个圆元素：var circle = document.createElementNS（NS，＆＃34; circle＆＃34;）; ns在 1中找到。它的http://www.w3.org/2000/svg它需要它看起来很复杂，但它只是你需要记住的东西。
设置圆属性：现在属性：我设置位置cx and c y with。setAttribute（）you could self try to position them differently. I also set the size r`属性和填充（填充上的长行代码只是为了我的乐趣，它会创建随机颜色）
现在我们已经完成了圈子，但javascript代码不知道放在哪里。所以我们告诉他：svgCircle（我们的svg文档）.appendChild（）将元素设置为svg文档的子元素。所以：svgCircle.appendChild(circle);其中circle是创建的svg元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

到目前为止如此接近