javascript – Snap.svg – 停止hover事件重新触发可暂停元素的子元素

对于一个项目,我使用SVG形状,包括背景多边形和一些文本(我已经转换为路径)在我的背景poly之上.我正在使用Snap.svg来动画我的形状.当我将鼠标悬停在我的多边形上时,该形状应该缩放到特定大小,包括其中的所有内容.在mouseout上,形状缩放回原始大小.

在这里您可以找到一个简化的示例：http://jsfiddle.net/XwwwU/11/

我已经像这样实现了它：

SVG / HTML

<svg>
   <g class="el">
     <polygon fill="#C7B299" points="114.558,206 82.115,149.5 114.558,93 179.442,93 211.885,149.5 179.442,206 "/>
     <path fill="#FCFFD4" d="<!-- Lots of points -->"/>
</g>
</svg>

JavaScript的

var s = Snap.select('svg');
var el = s.select('.el');

el.hover(function(){
  el.animate({transform:"t0,0 s1.35"}, 500);
}, function() {
    el.animate({ transform:"t0,0 s1" }, 500);   
});

这样可以正常工作,唯一的问题是悬停事件不仅在将鼠标移动到多边形上时触发,而且还在第二次在我的poly上的文本形状上方时触发.由于我希望在用户将鼠标悬停在文本上时也缩放Shape,如果在形状已经缩放时事件不会重新触发,则此行为会很好.像这样,当鼠标在文本上移动并且在我的实际项目中导致更多问题时,动画会变得不稳定.

将hoverable Element从组更改为poly就像这样

var s = Snap.select('svg');
var el = s.select('.el');
var poly = el.select('polygon')

poly.hover(function(){
    console.log('hover');
  el.animate({transform:"t0,0 s1.35"}, 500, mina.easeinout);
}, function() {
    console.log('unhover');
    el.animate({ transform:"t0,0 s1" }, 500, mina.easeinout);   
});

使情况变得更糟.虽然文本形状现在不再触发我的悬停功能,但是当鼠标悬停在文本上时,我的poly的悬停被删除,这也不是我想要的.

我想要实现的是文本对任何悬停操作完全不敏感,或者悬停事件没有重新触发文本,同时保持我的poly的“悬停状态”.

我怎样才能做到这一点？

我很感激任何帮助.谢谢！

解决方法:

将属性pointer-events =“none”添加到形成字母的路径元素中.

然后,为了鼠标悬停的目的,这将被忽略,就好像指针仍然在多边形上.

标签：javascript,svg,snap-svg
来源： https://codeday.me/bug/20190612/1226308.html