Question

对于一个项目，我使用的SVG形状由背景多边形和一些文本（我已转换为路径）组成，高于我的背景多边形。我正在使用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的“悬停状态”。

我怎样才能做到这一点？

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

Answer 1

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

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

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

1 个答案: