使用Snap.svg选择多条路径

Question

背景：我使用snap.svg在内联svg中动画路径，并试图在一个函数中动画多条路径。

Problem：使用下面的代码，我只能在一个抓取函数中选择一个路径。在下面的代码中，我使用了多个选择器，但是动画只影响rect#rect。如何在Snap.svg中选择多条路径？

谢谢你的帮助！

HTML/内联

<a id="one">link</a>

<svg>
<rect  id="rect-one" fill="#231F20" width="39" height="14"/>
<rect id="rect-two" x="54" fill="#231F20" width="39" height="14"/>
<rect id="rect-three" x="104" fill="#231F20" width="39" height="14"/>
</svg>

Snap

window.onload = function () {
    var grabLink = Snap.select('body a#one'),
        grabPathRectangles = Snap.select('#rect-one, #rect-two, #rect-three');

    function colorPathRectangles(){
        grabPathRectangles.animate({fill: 'red'}, 100, mina.ease);
    } 
    function resumePathRectangles(){
        grabPathRectangles.animate({fill: 'green'}, 100, mina.ease);
    }   
    grabLink.hover(colorPathRectangles, resumePathRectangles);  
};

Answer 1

我认为问题在于您不能将动画应用于一个集合(编辑:现在可能)，所以您必须将其应用于每个元素。为此，您可以使用forEach命令，所以..。

 grabPathRectangles.forEach( function(elem,i) {
        elem.animate({fill: 'red'}, 1000, mina.ease);
  });

在这里..。http://jsfiddle.net/DZ4wZ/3/

或者，我怀疑你可以把它们放到一个组中，如果这更有意义的话，你可以把它作为一个整体来动画。下面是一个示例http://jsfiddle.net/DZ4wZ/5/，但是，我不得不删除原来的填充。

编辑:看起来你现在可以把动画应用到一个集合上了，我认为这个特性过去不起作用，或者是错误的，所以不是历史上使用的。因此，您可能需要确保您有最新版本的Snap，如果使用它。

Answer 2

令人遗憾的是，伊恩的回答是不正确的，尽管他的小提琴悄悄地解决了实际问题。

问题是您已经使用Snap.select而不是Snap.selectAll来查询多个元素。Select只会返回满足选择器的第一个实例，而selectAll将获取所有这些实例并作为元素对象的集合或数组返回。这就是为什么只有一个元素响应动画。

此外，您当然可以同时调用一组元素上的animate，因此不需要使用额外的for循环来使事情复杂化。

来自Set.animate()上的文档：

同步动画设置中的每个元素。

下面是一个使用堆栈片段的工作演示。

它从记录select和SelectAll的不同输出开始

​

console.log("select:    ", Snap.select(   '#rect-1, #rect-2, #rect-3'));
console.log("selectAll: ", Snap.selectAll('#rect-1, #rect-2, #rect-3'));

var grabLink = Snap.select('#one'),
    grabPathRectangles = Snap.selectAll('#rect-1, #rect-2, #rect-3');

function colorPathRectangles(){
  grabPathRectangles.animate({fill: 'red'}, 1000, mina.ease);
} 
function resumePathRectangles(){
  grabPathRectangles.animate({fill: 'green'}, 1000, mina.ease);
}   

grabLink.hover(colorPathRectangles, resumePathRectangles);  

a#one {
  display: block;
  border: 1px solid blue;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

<a id="one">Hover Me</a>

<svg>
  <rect id="rect-1" fill="#231F20" width="39" height="14"/>
  <rect id="rect-2" fill="#231F20" width="39" height="14" x="54" />
  <rect id="rect-3" fill="#231F20" width="39" height="14" x="104" />
</svg>

​