Кликабельный контур вокруг пути Snap SVG

Question

В настоящее время я создаю небольшой инструмент моделирования, используя Snap SVG,

var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeWidth:1});

создает связи между другими элементами.

Каждый элемент, в том числе пути, кликабельны. Поскольку трудно щелкнуть точно путь, я попытался создать невидимый контур вокруг пути, используя Snap.filter.shadow так что событие click может быть запущено для пути:

var filter = this.paper.filter(Snap.filter.shadow(2,2,1));
filter.click(function() {
    do_as_if_i_clicked_the_path();
});
p.attr('filter', filter);

Но добавление события щелчка в фильтр не работает.

Есть ли способ создать невидимый контур, который связан с путем, чтобы я мог добавить события на нем?

Answer 1

Одна из возможностей, которая работает достаточно хорошо, - это клонировать объект, на котором вы хотите создать событие, и либо увеличить его, либо увеличить размер strokeWidth, а затем иметь очень низкую непрозрачность (вы можете увеличить это только для тестирования, а затем уменьшить это почти незаметно).

Если вы добавите его в группу, как в этом примере, вы можете просто перетащить группу, поэтому нет необходимости удалять ее или что-либо еще (если только вам не нужен клон, которого иногда нет, что имеет смысл).

jsfiddle

var s = Snap("#svg");

var myLine = s.path('M0,0L100,100').attr({ stroke: 'black', strokeWidth: 1 });

var myClone = myLine.clone().attr({ strokeWidth: 50, opacity: 0.01 });

var myGroup = s.g( myLine, myClone );
myGroup.drag();