Попытка создать цикл for для рисования SVG

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>

_{Свободный перевод вопроса Trying to make a for loop to draw an SVG от участника @user2703522.}

Answer 1

Видит око да зуб неймет

Вы не можете поместить html-код прямо в JavaScript (это было бы круто) JavaScript добавляет новые элементы через манипуляции с DOM. Итак, давайте рассмотрим код:

Сначала создайте пустой документ SVG с xmlns (просто установите xmlns = "http://www.w3.org/2000/svg", он работает в 99% случаях), и нам нужен идентификатор для выбора элемента.
Получите элемент SVG в JavaScript: document.getElementById ("svg_circles"). Здесь мы используем идентификатор, который мы установили для элемента, чтобы сохранить его в переменной.
В цикле for: создайте круговой элемент: var circle = document.createElementNS (NS, "circle"); Пространство имен NS находится в 1. Это http://www.w3.org/2000/svg. Это кажется сложным, но это необходимо и просто то, что вам нужно запомнить.
Установите атрибуты круга: я установил положение cx и cy с помощью .setAttribute(). Вы можете попробовать расположить их по-другому. Я также установил атрибут размера r и заливку (длинная строка кода на заливке с моей стороны просто для развлечения, она создает случайные цвета)
Теперь мы закончили с кругами, но код JavaScript не знает, куда их поместить. Итак, мы говорим: svgCircle.appendChild() устанавливает элемент как дочерний для нашего документа SVG.
Итак: svgCircle.appendChild(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>

_{Свободный перевод ответа от участника @Persijn.}

БЛОГ НА HUSL

Попытка создать цикл for для рисования SVG

Ответы (1 шт):

Видит око да зуб неймет