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，你可能需要手动设置它。

另外我susect 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);

SVG Snap按其ID选择一个组

2 个答案: