javascript - Snap.svg - 停止在悬停元素的子元素上重新触发悬停事件

Question

对于一个项目，我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本(我已将其转换为路径)组成。我正在使用 Snap.svg 为我的形状制作动画。当我将鼠标悬停在我的多边形上时，形状应该缩放到特定大小，包括其中的所有内容。鼠标移开时，形状会缩小到原来的大小。

在这里你可以找到一个简化的例子: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);   
});

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

像这样将悬停元素从组更改为多边形

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

让情况变得更糟。虽然文本形状现在不再触发我的悬停功能，但当鼠标悬停在文本上时，我的多边形悬停会消失，这也不是我想要的。

我想要实现的是文本对任何悬停操作完全不敏感，或者悬停事件不会在文本上重新触发，同时保持我的多边形的“悬停状态”。

我怎样才能做到这一点？

我很感激任何帮助。谢谢!

Answer 1

将属性 pointer-events="none"添加到构成字母的路径元素。

为了鼠标悬停，这将被忽略，就好像指针仍在多边形上一样。