SVG Snap выбрать группу по ID:

Question

Я пытаюсь получить элемент 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 Привязать

var currGroupId = group.id; 

Теперь, когда я попытаюсь ссылаться на свою группу позже в своем коде и получить ее по ее идентификатору,

s.select(currGroupId); 

Я получаю null. Как правильно выбрать элемент по его идентификатору?

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. Поэтому мы должны добавить «#» в начало идентификатора.

s.select("#" + currGroupId); 

Примечание: Этот метод был опробован мною с помощью SnapSVG V0.4.1

Если это не работает, и вы используете JQuery. попробуйте:

$("#"+currGroupId);