目前,我使用 Snap SVG 创建一个小型建模工具。
var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeWidth:1});
在其他元素之间创建连接。
每个元素,包括路径都是可点击的。由于很难准确单击路径,因此我尝试使用 Snap.filter.shadow 在路径周围创建不可见的轮廓,以便为路径触发单击事件:
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);
但是向过滤器添加点击事件不起作用。
有没有办法创建一个连接到路径的不可见轮廓,以便我可以在其上添加事件?
最佳答案
一种效果很好的可能性是克隆您想要在其上发生事件的对象,然后将其放大,或者使描边宽度更大,然后具有非常低的不透明度(您可以增加它只是为了测试然后将其缩小到几乎看不见)。
如果将其添加到像本例这样的组中,则只需在该组上拖动即可,因此无需将其删除或执行任何操作(除非您有时需要克隆不在那里,这是有道理的)。
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();
关于javascript - 捕捉 SVG 路径周围的可单击轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29900398/