CODEWITHSUNDEEP
javascriptpathclicksnap.svgoutline
rocky
rocky

Reputation: 47

Clickable outline around Snap SVG path

Currently I create a small modeling tool using Snap SVG. 

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

creates connections between other elements.

Every element, including the paths are clickable. Since it is hard to click exactly the path I tried to create an invisible outline around the path using Snap.filter.shadow so that a click event could be triggered for the path:

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);

But adding a click event to the filter doesn't work.

Is there any way to create an invisible outline that is connected to the path so I can add events on it?

Upvotes: 0

Views: 892

Answers (1)

Ian
Ian

Reputation: 13852

One possibility that works quite well, is to clone the object you want to have an event on, and either scale it up, or make the strokeWidth larger, and then have a very low opacity (you can increase this just for testing and then reduce it to almost invisible).

If you add it to a group like this example, you can just put a drag on the group, so no need to remove it or anything (unless you need the clone not to be there sometimes, which makes sense).

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();

Upvotes: 1

Related Questions