背景:我正在使用 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);
};