Snap.svg - 停止在可暂停元素的子元素上重新触发悬停事件 [英] Snap.svg - Stop hover event retriggering on a sub-element of the hoverable Element

问题描述

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

For a project, I'm using SVG shapes that consist of a background polygon and some text (which i have converted to paths) above my background poly. I am using Snap.svg to animate my shapes. When I hover over my poly, the shape is supposed to scale to a specific size, including everything inside it. On mouseout, the shape scales back to its original size.

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

Here you can find a simplified example: 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，这种行为可以很好如果在形状已经缩放时事件不会重新触发。像这样，当鼠标在文本上移动并且在我的实际项目中导致更多问题时，动画会变得不稳定。

This works fine, the only problem is that the hover event is not only triggered when moving the mouse over the polygon, but also a second time when it is above the text-shape on my poly. Since I want the Shape to scale also when the user is hovering over the text, this behaviour would be fine if the event wouldn't retrigger while the shape is already scaling. Like this, the animation gets jerky as the mouse moves over the text and cause more problems in my actual project.

将hoverable元素从组更改为仅像poly一样所以

Changing the hoverable Element from the group to just the poly like so

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的悬停被删除，这也不是我想要的。

makes it even worse. Though the text-shape does not trigger my hover function anymore now, the hover for my poly is dropped while the mouse is over the text, which is not what I want either.

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

What I want to achieve is either the text being completely insensitive of any hover action, or the hover event not retriggering on the text while maintaining the "hover-state" of my poly.

我怎样才能做到这一点？

How can I achieve this?

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

I'm grateful for any help. Thanks!

推荐答案

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

Add the attribute pointer-events="none" to the path element that forms the letter.

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

This will then be ignored for the purposes of mouse over and it will be as if the pointer is still over the polygon.

这篇关于Snap.svg - 停止在可暂停元素的子元素上重新触发悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！