使用 Snap.svg 选择多个路径答案

【问题标题】：Select multiple paths with Snap.svg使用 Snap.svg 选择多个路径
【发布时间】：2013-12-10 01:00:43
【问题描述】：

背景：我正在使用 snap.svg 为内联 svg 中的路径设置动画，并尝试在一个函数中为多个路径设置动画。

问题：使用下面的代码，我只能在一个抓取功能中选择一个路径。在下面的代码中，我使用了多个选择器，但动画只影响 rect#rect-one。如何在 Snap.svg 中选择多个路径？

感谢您的帮助！

HTML/内联 SVG：

<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>

快照：

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);  
};

【问题讨论】：

标签： svg raphael javascript snap.svg

【解决方案1】：

我认为问题在于您无法将动画应用于集合（编辑：现在可能），因此您必须将其应用于每个元素。为此，您可以使用 forEach 命令，所以...

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

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

或者我怀疑你可以将它们放入一个组中，如果这样更有意义的话，可以将该组动画化。这是一个例子http://jsfiddle.net/DZ4wZ/5/ 但是，我不得不删除原来的填充。

编辑：看起来您现在可以将动画应用到集合中，我认为此功能以前不起作用，或者有问题，因此在历史上没有使用过。因此，如果使用 Snap，您可能需要确保拥有最新版本的 Snap。

【讨论】：

感谢@ian - 我曾尝试使用组，但没有删除内联填充，这解决了我的问题！
感谢编辑！我正在尝试使用使用随机不透明度值的动画为组中的每个元素设置动画，我会看看它是如何进行的。

【解决方案2】：

不幸的是，@Ian 的回答是不正确的，尽管他的小提琴默默地解决了实际问题。

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

此外，您绝对可以同时在一组元素上调用 animate，因此无需使用额外的 for 循环使事情复杂化。

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

同步设置集合中的每个元素。

这是一个使用 Stack Snippets 的工作演示。

首先记录 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>

【讨论】：