Snap.svg: 间歇性动画错误
Snap.svg: Intermittent animation error
我一直试图找出导致下面示例中错误的原因。该错误定期发生。发生的情况是，当单击按钮为其旋转和关联的符号设置动画时，有时请求的动画会错误地缩放符号：它们会向上缩放。出现错误的符号也不一致。
您可能需要 运行 代码片段几次才能遇到错误。
<!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 <defs>.
Each sprite is comprised of a <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()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
//---obtain a random whole number from a thru b---
function rdm(a,b)
{
return a + Math.floor(Math.random()*(b-a+1));
}
function randomPoints(elems,svgWidth,svgHeight,elemSize)
{
//--return format:[ [x,y],[x,y],,, ]
//---Generate random points---
function times(n, fn)
{
var a = [], i;
for (i = 0; i < n; i++) {
a.push(fn(i));
}
return a;
}
var width=svgWidth-2*elemSize
var height=svgHeight-2*elemSize
return pntsXY = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
buildSpriteButtons()
addSpriteSymbols()
}
</script>
</body>
</html>
我认为问题出在这一行...
var txy=el.attr("transform").string.split("t");
虽然这将在动画第一次运行时起作用，但如果您尝试在动画中间单击按钮，这将 return 翻译一些垃圾，因为它包含的内容比您想要的要多，例如比例和旋转。
你可以用类似...
的方法绕过它
var txy=el.attr("transform").string.split(/(t[^rs]+)/i);
因此它不包括缩放和旋转。
http://jsfiddle.net/js25x4kw/6/
但是，如果您在动画结束前仍然单击按钮，您可能需要仔细检查转换会发生什么情况。例如，可能仍然存在一些现有的轮换，如果您需要每次都重置一些变量。
例如我怀疑这条线...
var symbolTransform=symbolDom.getAttribute("transform")
可能包括您在最后重置为的中间动画转换，因此您可能希望将其作为一次性存储（取决于您想要实现的目标）。甚至可能删除
symbolDom.setAttribute("transform",symbolTransform)
完全，因为我 'think' 没有它效果更好。
示例：jsfiddle
我一直试图找出导致下面示例中错误的原因。该错误定期发生。发生的情况是，当单击按钮为其旋转和关联的符号设置动画时，有时请求的动画会错误地缩放符号：它们会向上缩放。出现错误的符号也不一致。
您可能需要 运行 代码片段几次才能遇到错误。
<!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 <defs>.
Each sprite is comprised of a <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()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
//---obtain a random whole number from a thru b---
function rdm(a,b)
{
return a + Math.floor(Math.random()*(b-a+1));
}
function randomPoints(elems,svgWidth,svgHeight,elemSize)
{
//--return format:[ [x,y],[x,y],,, ]
//---Generate random points---
function times(n, fn)
{
var a = [], i;
for (i = 0; i < n; i++) {
a.push(fn(i));
}
return a;
}
var width=svgWidth-2*elemSize
var height=svgHeight-2*elemSize
return pntsXY = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
buildSpriteButtons()
addSpriteSymbols()
}
</script>
</body>
</html>
我认为问题出在这一行...
var txy=el.attr("transform").string.split("t");
虽然这将在动画第一次运行时起作用，但如果您尝试在动画中间单击按钮，这将 return 翻译一些垃圾，因为它包含的内容比您想要的要多，例如比例和旋转。
你可以用类似...
的方法绕过它var txy=el.attr("transform").string.split(/(t[^rs]+)/i);
因此它不包括缩放和旋转。
http://jsfiddle.net/js25x4kw/6/
但是，如果您在动画结束前仍然单击按钮，您可能需要仔细检查转换会发生什么情况。例如，可能仍然存在一些现有的轮换，如果您需要每次都重置一些变量。
例如我怀疑这条线...
var symbolTransform=symbolDom.getAttribute("transform")
可能包括您在最后重置为的中间动画转换，因此您可能希望将其作为一次性存储（取决于您想要实现的目标）。甚至可能删除
symbolDom.setAttribute("transform",symbolTransform)
完全，因为我 'think' 没有它效果更好。
示例：jsfiddle