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.

Here you can find a simplified example: /

I have implemented it like so:

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

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.

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

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.

What I want to achieve is either the text being pletely 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!

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.

Here you can find a simplified example: http://jsfiddle/XwwwU/11/

I have implemented it like so:

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

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.

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

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.

What I want to achieve is either the text being pletely 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!

• javascript
• svg
• snap.svg

1 Answer 1

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.