Question

我正在尝试构建一个SVG动画，但我遇到了所有元素一起动画的问题。

现在每个svg元素都是单独制作动画的，但是当我将鼠标悬停在#grid上时，我希望所有3个矩形都可以同时抓取父级的数据路径悬停并动画显示。

        <section id="grid" class="grid clearfix">
                    <span class="top" data-path-hover="M280.877,0H39.123C17.516,0,0,17.516,0,39.123v39.123h39.123h241.755H320V39.123
                            C320,17.516,302.484,0,280.877,0z">
                    <svg viewBox="0 0 320 80" preserveAspectRatio="none"><path d="M280,0C299.5,0,56.245,0,39.123,0S0,0,0,0v78.245h39.123h241.755H320V0C320,0,260.5,0,280,0z"/></svg>

                    </span>
        </section>



(function() {

            function init() {
                var speed = 330,
                    easing = mina.backout;

                [].slice.call ( document.querySelectorAll( 'span' ) ).forEach( function( el ) {
                    var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                        pathConfig = {
                            from : path.attr( 'd' ),
                            to : el.getAttribute( 'data-path-hover' )
                        };

                    el.addEventListener( 'mouseenter', function() {
                        path.animate( { 'path' : pathConfig.to }, speed, easing );
                    } );

                    el.addEventListener( 'mouseleave', function() {
                        path.animate( { 'path' : pathConfig.from }, speed, easing );
                    } );
                } );
            }

            init();

        })();

这是我目前的代码，任何帮助将不胜感激！ http://jsfiddle.net/2bLVG/

使用snap.js动画化多个svg对象

0 个答案: