3

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);  
        });
Georgi B. Nikolov
  • 976
  • 2
  • 13
  • 24

0 Answers0