javascript - 我尝试但未能在 fo 循环中打印出圆圈的 ID

Question

我想提请您注意（请参阅下面的我的尝试），我尝试在双 for 循环中打印出所有圆圈的 ID，但不能。每次我得到 null 或 [object SVGCircleElement]。

<script>
      const width = document.getElementById("svg239462").viewBox.baseVal.width; //510; //889.37;
      const height = document.getElementById("svg239462").viewBox.baseVal.height; //660; //690.44;

      //console.log(document.getElementById("svg239462"));
      console.log("this is width " + width); //667.030029296875
      console.log("this is height " + height); //517.8300170898438

      var draw = Snap('#svg');

      var c = 0;
      var count = 0;
      let size = Math.round(0.02 * width);

      for (let i = 0; i <= width; i = i + size) {

         count++;

         for (let j = 0; j <= height; j = j + size) {

            var rect = draw.rect(i, j, size, size);
            let circle = draw.circle(i, j, 30); //for circle around the corner of each rectangle

            circle.attr({
               fill: "#b905fa",
               "fill-opacity": 1,
               stroke: "#000",
               "stroke-width": "1px",
               id: "circle_" + (c++), //option3
               name: "circle" + (c++)
            });

            rect.attr({
               fill: "#d00bf3",
               "fill-opacity": 0.1,
               stroke: "#000",
               "stroke-width": "1px",
               id: "rect_" + (c++),
               name: "rect" + (c++)
            });

            //group.add(rect);

            var circleID = document.getElementById($(`#circle_${c++}`));
            //const circleID = document.getElementById($(`#circle_` + c));
            //(`circle_${c++}`); //(`circle_${c}`); //(circle.id);

            console.log("this is ID for circle: " + circleID);

            // Point is outside
            console.log('Point at 10,10:', circleID.isPointInFill(new DOMPoint(50, 50)));

            // Point is inside
            //console.log('Point at 40,30:', circle.isPointInFill(new DOMPoint(40, 30)));

         }
         //console.log("this is ID for circle: " + circleID);

      }

      const circleID = document.getElementById("circle_0"); //(`circle_${c}`);
      console.log("this is ID for circle: " + circleID);

      const selectedElement = document.querySelector('circle_0');
      console.log('.id', selectedElement.id);

      //console.log(selectedElement.toString());

      //console.log('#circle_1');

      console.log("this is for rectangle count: " + count);

      //console.log($('#d_electrolyzer').height());
      //console.log($("#rect908").height());

      if ($("#rect908").height() < $('#d_electrolyzer').height()) {
         console.log("alert");

         $("#rect908").attr({
            fill: "#000",
            "fill-opacity": 1
         });
      } else {
         console.log("alert2");
      }
   </script>

标签： javascripthtmlsvgsnap.svgjquery-svg