Блог

Я пытался создать группу элементов, созданных sag.js с помощью group (), но потерпел неудачу. Я был бы благодарен, если бы кто-нибудь нашел мне способ выпутаться из этого. Заранее спасибо. Вот моя попытка:

   const width = 525; //889.37;//510
  const height = 675; //690.44;//660

  //let svg = document.getElementById("create");
  //var ns = "http://www.w3.org/2000/svg";
  //let group = document.createElementNS(ns, "g");
  //group.setAttribute("name", "mygroup")

  for (let i = 0; i <= height; i = i   15) {
     for (let j = 0; j <= width; j = j   15) {

        //var group = draw.group();

        //var group = SVG().group();
        //var group = draw.group();
        //group.path('M10,20L30,40');
        var rect = SVG('#svg').rect(i, j, 15, 15);
        //group.add(rect);
        rect.attr({
           fill: "#ed2e3b",
           "fill-opacity": 0.001,
           stroke: "#000"
        });


        //group.appendChild(rect);

     }
     //group.appendChild(rect);
  }
  //group.appendChild(rect);
  //svg.appendChild(group);
 

Это должно сработать. Для каждого i существует новая группа.

 const width = 525; //889.37;//510
const height = 675; //690.44;//660

var draw = SVG().addTo('body').size(width, height);

for (let i = 0; i <= height; i = i   15) {
  var group = draw.group();
  for (let j = 0; j <= width; j = j   15) {

    var rect = draw.rect(i, j, 15, 15);

    rect.attr({
      fill: "#ed2e3b",
      "fill-opacity": 0.001,
      stroke: "#000"
    });
    group.add(rect);
  }
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>