5

对于一个项目，我使用的 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);   
});

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

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

我怎样才能做到这一点？

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

4

1 回答 1

7

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

然后，出于鼠标悬停的目的，这将被忽略，就好像指针仍在多边形上一样。

于 2014-02-14T09:36:21.810 回答