Snap.svg：间歇动画错误

我一直在试图在下面的示例中找到导致错误的原因。该错误定期发生。会发生什么情况是，当单击按钮以使其旋转和相关符号动起来时，有时候所请求的动画会错误地缩放符号：它们会缩小。发生错误的符号也不一致。Snap.svg：间歇动画错误

在遇到错误之前，您可能需要运行代码片段几次。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title> Animate Polygon Sprites</title> 
 
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script> 
 
<meta http-equiv="content-type" 
 
     content="application/xhtml+xml; charset=utf-8"/> 
 
</head> 
 
<body style='padding:10px;font-family:arial'> 
 
<center> 
 
<h4>Animate Polygon Sprites</h4> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
There are 30 sprites in the &lt;defs>. 
 
Each sprite is comprised of a &lt;g> element containing polygons created with their centers at (0,0) and sized at 1 pixel. 
 
Therefore they can be seamlessly transformed, making them ideal for animations. 
 

 
</div> 
 
<center><b>Click on a button to rotate its sprite and the associated symbols</b></center> 
 

 
<table ><tr> 
 
<td valign=top> 
 

 
<div style=width:100px;height:500px;overflow:auto> 
 
<table border=1 style=width:50px; id=spriteTable></table> 
 
</div> 
 
</td> 
 
<td align=center> 
 
<div id="svgDiv" style='width:400px;height:400px;background:lightgreen'> 
 
<svg id=mySVG width=400 height=400> 
 
<defs id=spriteDefs><svg xmlns="http://www.w3.org/2000/svg"><g size="1" id="Star4"><polygon fill="black" stroke="none" points="0.176777,0.176777 0.5,2.98023e-008 0.176777,-0.176777 2.98023e-008,-0.5 -0.176777,-0.176777 -0.5,2.98023e-008 -0.176777,0.176777 2.98023e-008,0.5" /></g><g size="1" id="Star5"><polygon fill="black" stroke="none" points="0.25,0.131433 0.5,-0.112257 0.154508,-0.16246 -1.6888e-008,-0.475527 -0.154508,-0.16246 -0.5,-0.112257 -0.25,0.131433 -0.309017,0.475527 -1.6888e-008,0.313068 0.309017,0.475527" /></g><g size="1" id="Star6"><polygon fill="black" stroke="none" points="0.216506,0.125 0.5,2.98023e-008 0.216506,-0.125 0.25,-0.433013 2.98023e-008,-0.25 -0.25,-0.433013 -0.216506,-0.125 -0.5,2.98023e-008 -0.216506,0.125 -0.25,0.433013 2.98023e-008,0.25 0.25,0.433013" /></g><g size="1" id="Star10"><polygon fill="black" stroke="none" points="0.146946,0.202254 0.40451,0.293893 0.237764,0.0772543 0.5,2.98023e-008 0.237764,-0.0772543 0.40451,-0.293893 0.146946,-0.202254 0.154509,-0.475527 2.98023e-008,-0.25 -0.154508,-0.475527 -0.146946,-0.202254 -0.40451,-0.293893 -0.237764,-0.0772543 -0.5,2.98023e-008 -0.237764,0.0772543 -0.40451,0.293893 -0.146946,0.202254 -0.154508,0.475527 2.98023e-008,0.25 0.154509,0.475527" /></g><g size="1" id="Star15"><polygon fill="black" stroke="none" points="0.102244,0.235138 0.295511,0.41223 0.18681,0.173697 0.435397,0.25687 0.239074,0.083173 0.5,0.0580453 0.25,-0.0207829 0.478147,-0.149866 0.217699,-0.120195 0.37362,-0.330915 0.147756,-0.197875 0.204488,-0.453797 0.0522643,-0.240391 -3.67563e-008,-0.49726 -0.0522643,-0.240391 -0.204489,-0.453797 -0.147756,-0.197875 -0.37362,-0.330915 -0.217699,-0.120195 -0.478147,-0.149866 -0.25,-0.0207829 -0.5,0.0580453 -0.239074,0.083173 -0.435397,0.25687 -0.18681,0.173697 -0.295512,0.41223 -0.102244,0.235138 -0.104528,0.49726 -3.67563e-008,0.25687 0.104528,0.49726" /></g><g size="1" id="Pgon4d"><polygon fill="black" stroke="none" points="0.5,-1.47025e-007 -1.47025e-007,-0.5 -0.5,-1.47025e-007 -1.47025e-007,0.5" /></g><g size="1" id="Pgon6"><polygon fill="black" stroke="none" points="0.5,5.96047e-008 0.25,-0.433013 -0.25,-0.433013 -0.5,5.96047e-008 -0.25,0.433013 0.25,0.433013" /></g><g size="1" id="RhombHoriz"><polygon fill="black" stroke="none" points="-2.1855e-007,-0.288675 -0.5,-2.1855e-007 -2.1855e-007,0.288675 0.5,-2.1855e-007" /></g><g size="1" id="RhombVert"><polygon fill="black" stroke="none" points="-2.1855e-007,-0.5 -0.288675,-2.1855e-007 -2.1855e-007,0.5 0.288675,-2.1855e-007" /></g><g size="1" id="CircleStar6"><polygon fill="black" stroke="none" points="0.5,-4.5697e-008 0.475527,-0.154509 0.40451,-0.293893 0.293893,-0.40451 0.154508,-0.47553 -4.5697e-008,-0.5 -0.154509,-0.47553 -0.293893,-0.40451 -0.40451,-0.293893 -0.47553,-0.154509 -0.5,-4.5697e-008 -0.47553,0.154508 -0.40451,0.293893 -0.293893,0.40451 -0.154509,0.475527 -4.5697e-008,0.5 0.154508,0.475527 0.293893,0.40451 0.40451,0.293893 0.475527,0.154508" /><polygon fill="white" stroke="none" points="0.20773,0.119933 0.479733,-4.5697e-008 0.20773,-0.119933 0.239866,-0.41546 -4.5697e-008,-0.239866 -0.239866,-0.41546 -0.20773,-0.119933 -0.479733,-4.5697e-008 -0.20773,0.119933 -0.239866,0.41546 -4.5697e-008,0.239866 0.239866,0.41546" /></g><g size="1" id="Pgon4vStar6"><polygon fill="black" stroke="none" points="0.5,-1.47025e-007 -1.47025e-007,-0.5 -0.5,-1.47025e-007 -1.47025e-007,0.5" /><polygon fill="white" stroke="none" points="0.171464,0.0989947 0.39598,-1.47025e-007 0.171464,-0.098995 0.19799,-0.34293 -1.47025e-007,-0.19799 -0.19799,-0.34293 -0.171464,-0.098995 -0.39598,-1.47025e-007 -0.171464,0.0989947 -0.19799,0.34293 -1.47025e-007,0.19799 0.19799,0.34293" /></g><g size="1" id="Pgon4Star6"><polygon fill="black" stroke="none" points="0.48077,0.48077 0.48077,-0.48077 -0.48077,-0.48077 -0.48077,0.48077" /><polygon fill="white" stroke="none" points="0.216506,0.125 0.5,3.57627e-008 0.216506,-0.125 0.25,-0.433013 3.57627e-008,-0.25 -0.25,-0.433013 -0.216506,-0.125 -0.5,3.57627e-008 -0.216506,0.125 -0.25,0.433013 3.57627e-008,0.25 0.25,0.433013" /></g><g size="1" id="Pgon4dCircle"><polygon fill="black" stroke="none" points="0.5,-1.49012e-008 -1.49012e-008,-0.5 -0.5,-1.49012e-008 -1.49012e-008,0.5" /><polygon fill="white" stroke="none" points="0.282509,-1.49012e-008 0.268682,-0.0873 0.228555,-0.166055 0.166055,-0.228555 0.0873,-0.268682 -1.49012e-008,-0.282509 -0.0873,-0.268682 -0.166055,-0.228555 -0.228555,-0.166055 -0.268682,-0.0873 -0.282509,-1.49012e-008 -0.268682,0.0873 -0.228555,0.166055 -0.166055,0.228555 -0.0873,0.268682 -1.49012e-008,0.282509 0.0873,0.268682 0.166055,0.228555 0.228555,0.166055 0.268682,0.0873" /></g><g size="1" id="Pgon4vRhombHoriz"><polygon fill="black" stroke="none" points="0.5,-1.47025e-007 -1.47025e-007,-0.5 -0.5,-1.47025e-007 -1.47025e-007,0.5" /><polygon fill="white" stroke="none" points="-1.47025e-007,-0.282843 -0.489897,-1.47025e-007 -1.47025e-007,0.282843 0.489897,-1.47025e-007" /></g><g size="1" id="Pgon4vRhombVert"><polygon fill="black" stroke="none" points="0.5,-1.82788e-007 -1.82788e-007,-0.5 -0.5,-1.82788e-007 -1.82788e-007,0.5" /><polygon fill="white" stroke="none" points="-1.82788e-007,-0.45928 -0.265165,-1.82788e-007 -1.82788e-007,0.45928 0.265165,-1.82788e-007" /></g><g size="1" id="CircleRhombHoriz"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="5.16573e-008,-0.260724 -0.451587,5.16573e-008 5.16573e-008,0.260724 0.451587,5.16573e-008" /></g><g size="1" id="CircleRhombVert"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="5.16573e-008,-0.451587 -0.260724,5.16573e-008 5.16573e-008,0.451587 0.260724,5.16573e-008" /></g><g size="1" id="CirclePgon3r"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.421483,5.16573e-008 -0.210741,-0.365013 -0.210741,0.365013" /></g><g size="1" id="CirclePgon3t"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.365013,0.210741 5.16573e-008,-0.42148 -0.365013,0.210741" /></g><g size="1" id="CirclePgon3l"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.210741,0.365013 0.210741,-0.365013 -0.42148,5.16573e-008" /></g><g size="1" id="CirclePgon3b"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="5.16573e-008,0.421483 0.365013,-0.210741 -0.365013,-0.210741" /></g><g size="1" id="CirclePgon4d"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.442463,5.16573e-008 5.16573e-008,-0.442463 -0.442463,5.16573e-008 5.16573e-008,0.442463" /></g><g size="1" id="CircleEllipseVert"><polygon fill="black" stroke="none" points="0.5,-9.23873e-008 0.475527,-0.154509 0.40451,-0.293893 0.293893,-0.40451 0.154508,-0.47553 -9.23873e-008,-0.5 -0.154509,-0.47553 -0.293893,-0.40451 -0.40451,-0.293893 -0.47553,-0.154509 -0.5,-9.23873e-008 -0.47553,0.154508 -0.40451,0.293893 -0.293893,0.40451 -0.154509,0.475527 -9.23873e-008,0.5 0.154508,0.475527 0.293893,0.40451 0.40451,0.293893 0.475527,0.154508" /><polygon fill="white" stroke="none" points="0.1875,-9.23873e-008 0.178323,-0.115881 0.151691,-0.22042 0.11021,-0.303382 0.0579407,-0.356647 -9.23873e-008,-0.375 -0.0579407,-0.356647 -0.11021,-0.303382 -0.151691,-0.22042 -0.178323,-0.115881 -0.1875,-9.23873e-008 -0.178323,0.115881 -0.151691,0.220419 -0.11021,0.303381 -0.0579407,0.356647 -9.23873e-008,0.375 0.0579407,0.356647 0.11021,0.303381 0.151691,0.220419 0.178323,0.115881" /></g><g size="1" id="CircleEllipseHoriz"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.4,5.16573e-008 0.380423,-0.0618033 0.323607,-0.117557 0.235114,-0.161803 0.123607,-0.190211 5.16573e-008,-0.2 -0.123607,-0.190211 -0.235114,-0.161803 -0.323607,-0.117557 -0.380423,-0.0618033 -0.4,5.16573e-008 -0.380423,0.0618033 -0.323607,0.117557 -0.235114,0.161803 -0.123607,0.190211 5.16573e-008,0.2 0.123607,0.190211 0.235114,0.161803 0.323607,0.117557 0.380423,0.0618033" /></g><g size="1" id="Pgon4Circle"><polygon fill="black" stroke="none" points="0.5,0.5 0.5,-0.5 -0.5,-0.5 -0.5,0.5" /><polygon fill="white" stroke="none" points="0.383547,5.96047e-008 0.364777,-0.118523 0.310296,-0.225443 0.225443,-0.310296 0.118523,-0.364777 5.96047e-008,-0.383547 -0.118523,-0.364777 -0.225443,-0.310296 -0.310296,-0.225443 -0.364777,-0.118523 -0.383547,5.96047e-008 -0.364777,0.118523 -0.310296,0.225443 -0.225443,0.310296 -0.118523,0.364777 5.96047e-008,0.383547 0.118523,0.364777 0.225443,0.310296 0.310296,0.225443 0.364777,0.118523" /></g><g size="1" id="CirclePgon4"><polygon fill="black" stroke="none" points="0.5,-6.15913e-008 0.475527,-0.154509 0.40451,-0.293893 0.293893,-0.40451 0.154508,-0.475527 -6.15913e-008,-0.5 -0.154509,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154509 -0.5,-6.15913e-008 -0.475527,0.154508 -0.40451,0.293893 -0.293893,0.40451 -0.154509,0.475527 -6.15913e-008,0.5 0.154508,0.475527 0.293893,0.40451 0.40451,0.293893 0.475527,0.154508" /><polygon fill="white" stroke="none" points="0.312869,0.312869 0.312869,-0.312869 -0.312869,-0.312869 -0.312869,0.312869" /></g><g size="1" id="Pgon6Circle"><polygon fill="black" stroke="none" points="0.5,5.96047e-008 0.25,-0.433013 -0.25,-0.433013 -0.5,5.96047e-008 -0.25,0.433013 0.25,0.433013" /><polygon fill="white" stroke="none" points="0.319623,5.96047e-008 0.303979,-0.0987687 0.25858,-0.187869 0.187869,-0.25858 0.0987687,-0.303979 5.96047e-008,-0.319623 -0.0987687,-0.303979 -0.187869,-0.25858 -0.25858,-0.187869 -0.303979,-0.0987687 -0.319623,5.96047e-008 -0.303979,0.0987687 -0.25858,0.187869 -0.187869,0.25858 -0.0987687,0.303979 5.96047e-008,0.319623 0.0987687,0.303979 0.187869,0.25858 0.25858,0.187869 0.303979,0.0987687" /></g><g size="1" id="Pgon4CircleStar5"><polygon fill="black" stroke="none" points="0.5,0.5 0.5,-0.5 -0.5,-0.5 -0.5,0.5" /><polygon fill="white" stroke="none" points="0.383547,5.96047e-008 0.364777,-0.118523 0.310296,-0.225443 0.225443,-0.310296 0.118523,-0.364777 5.96047e-008,-0.383547 -0.118523,-0.364777 -0.225443,-0.310296 -0.310296,-0.225443 -0.364777,-0.118523 -0.383547,5.96047e-008 -0.364777,0.118523 -0.310296,0.225443 -0.225443,0.310296 -0.118523,0.364777 5.96047e-008,0.383547 0.118523,0.364777 0.225443,0.310296 0.310296,0.225443 0.364777,0.118523" /><polygon fill="black" stroke="none" points="0.152169,0.0494427 0.304338,-0.0988853 0.0940457,-0.129443 5.96047e-008,-0.32 -0.0940457,-0.129443 -0.304338,-0.0988853 -0.152169,0.0494427 -0.188091,0.258886 5.96047e-008,0.16 0.188091,0.258886" /></g><g size="1" id="CirclePgon4vStar6"><polygon fill="black" stroke="none" points="0.5,5.16573e-008 0.47553,-0.154508 0.40451,-0.293893 0.293893,-0.40451 0.154509,-0.475527 5.16573e-008,-0.5 -0.154508,-0.475527 -0.293893,-0.40451 -0.40451,-0.293893 -0.475527,-0.154508 -0.5,5.16573e-008 -0.475527,0.154509 -0.40451,0.293893 -0.293893,0.40451 -0.154508,0.47553 5.16573e-008,0.5 0.154509,0.47553 0.293893,0.40451 0.40451,0.293893 0.47553,0.154509" /><polygon fill="white" stroke="none" points="0.442463,5.16573e-008 5.16573e-008,-0.442463 -0.442463,5.16573e-008 5.16573e-008,0.442463" /><polygon fill="black" stroke="none" points="0.135476,0.0782173 0.312869,5.16573e-008 0.135476,-0.0782173 0.156435,-0.270952 5.16573e-008,-0.156434 -0.156434,-0.270952 -0.135476,-0.0782173 -0.312869,5.16573e-008 -0.135476,0.0782173 -0.156434,0.270952 5.16573e-008,0.156435 0.156435,0.270952" /></g><g size="1" id="Star6Circle"><polygon fill="black" stroke="none" points="0.216506,0.125 0.5,0 0.216506,-0.125 0.25,-0.433013 0,-0.25 -0.25,-0.433013 -0.216506,-0.125 -0.5,0 -0.216506,0.125 -0.25,0.433013 0,0.25 0.25,0.433013" /><polygon fill="white" stroke="none" points="0.239717,0 0.227984,-0.0740767 0.193935,-0.140902 0.140902,-0.193935 0.0740767,-0.227984 0,-0.239717 -0.0740767,-0.227984 -0.140902,-0.193935 -0.193935,-0.140902 -0.227984,-0.0740767 -0.239717,0 -0.227984,0.0740767 -0.193935,0.140902 -0.140902,0.193935 -0.0740767,0.227984 0,0.239717 0.0740767,0.227984 0.140902,0.193935 0.193935,0.140902 0.227984,0.0740767" /></g><g size="1" id="Pgon6Star6"><polygon fill="black" stroke="none" points="0.5,0 0.25,-0.433013 -0.25,-0.433013 -0.5,0 -0.25,0.433013 0.25,0.433013" /><polygon fill="white" stroke="none" points="0.216506,0.125 0.5,0 0.216506,-0.125 0.25,-0.433013 0,-0.25 -0.25,-0.433013 -0.216506,-0.125 -0.5,0 -0.216506,0.125 -0.25,0.433013 0,0.25 0.25,0.433013" /></g><g size="1" id="Pgon8Star4"><polygon fill="black" stroke="none" points="0.5,-5.2154e-008 0.353553,-0.353553 -5.2154e-008,-0.5 -0.353553,-0.353553 -0.5,-5.2154e-008 -0.353553,0.353553 -5.2154e-008,0.5 0.353553,0.353553" /><polygon fill="white" stroke="none" points="0.162359,0.162359 0.45922,-5.2154e-008 0.162359,-0.162359 -5.2154e-008,-0.45922 -0.162359,-0.162359 -0.45922,-5.2154e-008 -0.162359,0.162359 -5.2154e-008,0.45922" /></g></svg></defs> 
 
</svg> 
 
</div> 
 

 
</td> 
 
</tr></table> 
 
<script id=myScript> 
 
var SNPsvg = Snap("#mySVG"); 
 

 

 
var NS="http://www.w3.org/2000/svg" 
 
var SpriteButtons=[] 
 
function buildSpriteButtons() 
 
{ 
 
    var buttonSize=50 
 

 
    var defs=document.getElementById("spriteDefs") 
 
    var root=defs.firstChild 
 
    var sprites=root.childNodes 
 

 
    for(var k=0;k<sprites.length;k++) 
 
    { 
 
     var svg=document.createElementNS(NS,"svg") 
 
     svg.setAttribute("overflow","visible") 
 
     svg.setAttribute("x",0) 
 
     svg.setAttribute("y",0) 
 
     svg.setAttribute("width",buttonSize) 
 
     svg.setAttribute("height",buttonSize) 
 
     var mySprite=sprites[k].cloneNode(true) 
 
     mySprite.id='sprite'+k 
 
     mySprite.setAttribute("transform","translate("+buttonSize/2+","+buttonSize/2+")scale("+buttonSize+")") 
 

 
     var pgons=mySprite.childNodes 
 
     for(var n=0;n<pgons.length;n++) 
 
     { 
 
      var pgon=pgons.item(n) 
 
      pgon.setAttribute("fill",rcolor()) 
 
      pgon.setAttribute("stroke",'black') 
 
      pgon.setAttribute("stroke-width",'.025') 
 
      pgon.setAttribute("onclick","animateIcon(evt)") 
 
     } 
 
     SpriteButtons.push(mySprite) 
 
     svg.appendChild(mySprite) 
 
     //---place in a table-- 
 
     var row=spriteTable.insertRow(k) 
 
     var svgCell=row.insertCell(0) 
 
     svgCell.style.width="50px" 
 
     svgCell.style.height="50px" 
 
     var button=document.createElement("button") 
 
     svgCell.appendChild(button) 
 

 
     button.innerHTML=new XMLSerializer().serializeToString(svg) 
 
    } 
 

 
} 
 

 
//---each sprite's polygon onclick--- 
 
function animateIcon(evt) 
 
{ 
 
    var buttonSize=50 
 
    var mySprite=evt.target.parentNode //---g node--- 
 
    var spriteId=mySprite.id 
 
    var animMe=Snap.select("#"+spriteId) 
 

 
    var rotateRange=360 
 
    var duration=500 
 
    //---animate button--- 
 
    Snap.animate(0, 1, 
 
     function(delta) //---setter-- 
 
     { 
 
      var angle=rotateRange*delta 
 
      animMe.transform("t("+buttonSize/2+","+buttonSize/2+") s("+buttonSize+") r("+angle+")") 
 
     }, 
 
     duration, 
 
     mina.linear 
 
    ); 
 

 
    var symbolSize=30 
 
    SymbolSet.forEach 
 
    (
 
     function(el) 
 
     { 
 
      var id=el.attr("id") 
 
      if(id.indexOf(spriteId+"_")!=-1) 
 
      { 
 
       var symbolDom=document.getElementById(id) 
 
       var symbolTransform=symbolDom.getAttribute("transform") 
 

 
       var txy=el.attr("transform").string.split("t") //-translate--- 
 
       var trans="t("+txy[1]+")" 
 

 
       Snap.animate(0, 1, 
 
         function(delta) //---setter-- 
 
         { 
 
          var angle=rotateRange*delta 
 
          el.transform(trans+" "+"s("+symbolSize+") r("+angle+")") 
 
         }, 
 
         duration, 
 
         mina.linear, 
 
         function() 
 
         { //---reset dom element to original transform--- 
 
          symbolDom.setAttribute("transform",symbolTransform) 
 
         } 
 
        ); 
 
      } 
 
     } 
 
    ); 
 

 
} 
 

 
//---onload--- 
 
var SymbolSet 
 
function addSpriteSymbols() 
 
{ 
 
    SymbolSet=Snap.set() 
 
    var symbolSize=30 
 

 
    var points=randomPoints(100,400,400,symbolSize) 
 

 
    for(var m = 0; m < points.length; m++) 
 
    { 
 
     var pnt=points[m] 
 
     var k=rdm(0,SpriteButtons.length-1) 
 

 
     var mySprite=SpriteButtons[k].cloneNode(true) 
 
     mySprite.removeAttribute("onclick") 
 
     mySprite.id="sprite"+k+"_"+m 
 
     mySprite.setAttribute("transform","translate("+pnt[0]+","+pnt[1]+")scale("+symbolSize+")") 
 

 
     var pgons=mySprite.childNodes 
 
     for(var n=0;n<pgons.length;n++) 
 
     { 
 
      var pgon=pgons.item(n) 
 
      pgon.removeAttribute("onclick") 
 
     } 
 
     mySVG.appendChild(mySprite) 
 

 
     var snapSymbol=Snap.select("#sprite"+k+"_"+m) 
 
     SymbolSet.push(snapSymbol) 
 
    } 
 
} 
 

 
//---random color--- 
 
function rcolor() 
 
{ 
 
\t var letters = 'ABCDEF'.split(''); 
 
\t var color = '#'; 
 
\t for (var i = 0; i < 6; i++) 
 
\t { 
 
\t  color += letters[Math.round(Math.random() * 15)]; 
 
\t } 
 
\t return color; 
 
} 
 
//---obtain a random whole number from a thru b--- 
 
function rdm(a,b) 
 
{ 
 
    return a + Math.floor(Math.random()*(b-a+1)); 
 
} 
 
\t function randomPoints(elems,svgWidth,svgHeight,elemSize) 
 
\t { 
 
\t \t //--return format:[ [x,y],[x,y],,, ] 
 
\t \t //---Generate random points--- 
 
\t \t function times(n, fn) 
 
\t \t { 
 
\t \t \t var a = [], i; 
 
\t \t \t for (i = 0; i < n; i++) { 
 
\t \t \t a.push(fn(i)); 
 
\t \t \t } 
 
\t \t \t return a; 
 
\t \t } 
 
\t \t var width=svgWidth-2*elemSize 
 
\t \t var height=svgHeight-2*elemSize 
 

 
\t \t return \t pntsXY = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] }); 
 
\t } 
 
</script> 
 
<script> 
 
document.addEventListener("onload",init(),false) 
 
function init() 
 
{ 
 

 
    buildSpriteButtons() 
 
     addSpriteSymbols() 
 
} 
 
</script> 
 

 
</body> 
 

 
</html>

来源

2017-04-24 Francis Hemsher

我认为这个问题是这条线......

var txy=el.attr("transform").string.split("t");

虽然这将是第一次合作的动画运行，如果你试着点击按钮中旬动画，这将返回一些垃圾进行翻译，因为它包括更多的东西比你想要的规模和旋转。

你可能围绕它得到的东西，如...

var txy=el.attr("transform").string.split(/(t[^rs]+)/i);

所以它不包括体重秤和旋转。

http://jsfiddle.net/js25x4kw/6/

但是，您可能要仔细检查，会出现什么情况改变，如果你仍然在动画完成之前单击按钮。例如，可能还存在一些现有旋转，例如添加到其中，并且每次都需要重置一些变量。

如我怀疑这条线......

var symbolTransform=symbolDom.getAttribute("transform")

可能包括中期的动画变换你重置为在年底，所以你可能要存储这些早期的一次性（取决于什么你想达到）。也许甚至删除

symbolDom.setAttribute("transform",symbolTransform)

完全，因为我认为它没有它更好的工作。

例子：jsfiddle

来源

2017-04-25 10:24:32 Ian

非常感谢伊恩，该诀窍：我删除symbolTransform如你所说和修改TXY。此外，在这种情况下，SymbolSet可能不如阵列精确。我用一个数组做了一些测试（使用以前的symbolTransform值），并且问题没有出现。 –

Snap.svg：间歇动画错误

回答

相关问题