Snap.svg只选择一个路径

Question

我试图做这个类似折纸的动画，但Snap.svg只选择一条路径 - 第一条动画。

我已尝试将path = s.select( 'path' )更改为path = s.selectAll( 'path' )，如文档中所述，但它无法正常工作。

我错在哪里？

以下是代码：http://jsfiddle.net/HGwXL/

Answer 1

selectAll将返回一组。因此，您需要迭代该集合，可能需要使用forEach ....

var pathSet = s.selectAll( 'path' );

pathSet.forEach( function( myPath ) {

      var pathConfig = {
          from : myPath.attr( 'd' ),
          to : myPath.attr( 'data-path-hover' )
      };

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

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

});

jsfiddle此处

你可能也会稍微改变一下，并且只有一个处理程序只是在路径上迭代并为它们设置动画，但它可能有点小费。