Html SVG Raphaeljs创建矩形网格

我想使用SVG Raphaeljs创建一个用户定义的矩形网格。我目前使用的方法接近我想要它做的，但它显然不正确

我现在的代码是：

创建矩形并尝试将它们放置在彼此距离相等的均匀网格中

}

由于我糟糕的编码，上面的代码目前生成了这个不稳定的网格

我需要这样做，用户只需编辑我在for循环中输入的值，然后使用该数字更改每个形状的放置距离，即可输入实际行数和列数

---

正如你所看到的，我试图通过制作一个粗略的公式来做到这一点，但我现在被卡住了，所以任何帮助都是非常感谢的。

好的，我很傻。我注意到一个错误，我已将代码修改为以下内容：

function startup() {
    var paper = Raphael(50, 50, 1500, 875);
    for (var i = 0; i <= 7; i++) {
        for (var j = 0; j <= 4; j++) {

            var offseti = i; // Stores the number to remove from the next variable to keep an even distance between shapes
            var moveRight = (i + 20 - offseti) * i; // new variable stores the amount to move the next rectangle along by adding 20 (distance in pixels
            // to move to the right) to the loop counter i and then subtracting the offset which is the variable i
            var offsetj = j; // before the + 20 was added and then multiplying it all by i again.
            var moveDown = (j + 25 - offsetj) * j;


            var c = paper.rect(moveRight, moveDown, 15, 20);

            c.attr("fill", "#f00");
            c.attr("stroke", "#fff");

        }
    }
}

function startup() {
    var paper = Raphael(50, 50, 1500, 875);
    for (var i = 0; i <= 7; i++) {
        for (var j = 0; j <= 4; j++) {

            var offseti = i; // Stores the number to remove from the next variable to keep an even distance between shapes
            var moveRight = (i + 20 - offseti) * i; // new variable stores the amount to move the next rectangle along by adding 20 (distance in pixels
            // to move to the right) to the loop counter i and then subtracting the offset which is the variable i
            var offsetj = j; // before the + 20 was added and then multiplying it all by i again.
            var moveDown = (j + 25 - offsetj) * j;


            var c = paper.rect(moveRight, moveDown, 15, 20);

            c.attr("fill", "#f00");
            c.attr("stroke", "#fff");

        }
    }
}