如何使用svg.js创建元素组？调用group()方法失败该如何解决

问题根因 #

• 库名拼写错误，你使用的是SVG.js，不是sag.js
• 分组实例需要在循环外提前创建，不能嵌套在循环中每次生成新分组
• SVG.js的rect()方法入参顺序为「宽度、高度」，位置需要单独调用move(x,y)方法设置，原有传参不符合API规则
• 你注释了group.add(rect)的关联逻辑，导致矩形没有被加入分组

修正代码 #

const width = 525;
const height = 675;
// 初始化SVG画布实例
const draw = SVG('#svg');
// 提前创建分组，设置自定义属性
const rectGroup = draw.group().attr('name', 'mygroup');

for (let i = 0; i <= height; i += 15) {
  for (let j = 0; j <= width; j += 15) {
    // 创建15*15矩形，设置坐标
    const rect = draw.rect(15, 15).move(j, i);
    // 将矩形加入分组
    rectGroup.add(rect);
    rect.attr({
      fill: "#ed2e3b",
      "fill-opacity": 0.001,
      stroke: "#000"
    });
  }
}

验证方式 #

代码运行后，在浏览器控制台执行document.querySelector('g[name="mygroup"]')，即可看到所有生成的矩形均已被归入该分组下。

内容的提问来源于stack exchange，提问作者Arif Ahmed