I am making a hover effect, which involves changing a shape on mouseEnter and mouseLeave. Everything works fine, but the shape changes from its default pivot point - 50% 50%. I would like to know how to set the transform origin? I tried translating it with a negative y offset, but can't get it to work..
Here's the code:
var s = Snap('svg'),
speed = 200,
easing = mina.easeinout,
path = s.select('path'),
el = document.getElementById('container'),
pathConfig = {
from: path.attr('d'),
to: el.getAttribute( 'data-path-hover' )
},
t = new Snap.Matrix();
path.attr({
cx:-200
});
el.addEventListener('mouseenter', function () {
path.animate({
'path': pathConfig.to ,
'y':120
}, speed, easing);
});
el.addEventListener('mouseleave', function () {
path.animate({
'path': pathConfig.from
}, speed, easing);
});