SVG Snap 按 ID 选择一个组

Question

我正在尝试通过它的 id 获取 SVG Snap 元素。首先我创建一个画布：

 var s = Snap("#svgout"), //creates the canvas

然后我创建一个组：

            var rect = s.rect(posx, posy, 40, 40, 6).attr({
                fill: "none",
                stroke: "#F44336",
                strokeWidth: 3,
            });

            var group = s.group(rect).attr({
                cursor: "move",
            });

接下来我得到了 SVG Snap 默认的组的 ID

var currGroupId = group.id;

现在，当我稍后尝试在我的代码中引用我的组并通过它的 id 获取它时，

s.select(currGroupId);

我得到空值。如何通过 id 正确选择元素？

Answer 1

select 将使用 cssSelector，就像在 container.queryAll 中一样。

所以我不认为 Snap 将 id 设置为 svg 属性（如果我错了，请纠正我）。这意味着如果你想使用 select，你可能必须手动设置它。

我也怀疑 s.select(id) 不起作用，我认为它必须是 s.select('#'.id) 但我可能错了。如果你能搞定，它会更容易测试。

Answer 2

SnapSVG 不会自动设置组的 ID 属性。相反，它将一个字段添加到对象本身。解决此限制的一种方法是执行以下操作。

var s = Snap("#svgout");

var rect = s.rect(posx, posy, 40, 40, 6).attr({
  fill: "none",
  stroke: "#F44336",
  strokeWidth: 3,
});

var group = s.group(rect).attr({
  cursor: "move",
});

显式设置 ID。

group.attr({
  id: group.id
});

var currGroupId = group.id;

select 使用 CSS 选择器。所以我们必须在 ID 的开头添加一个“#”。

s.select("#" + currGroupId);

注意：此方法已由我使用 SnapSVG V0.4.1 测试过

如果这不起作用并且您正在使用 jQuery。试试：

$("#"+currGroupId);