Animation SVG动画（变形）onClick

我遵循了本页的教程：

这两个形状只是在彼此之间闪烁。有人知道他们为什么不彼此设置动画/变形吗

出于某种原因，我的小提琴没有做任何事情，但svg代码与我桌面上的代码相同，它们在彼此之间闪烁，而不是变形。。。我基本上从上面的教程下载了html/svg文件，并在svg代码中发布

两个svg上应该有相同数量的点，每个18点，所有点都是相同的。我浏览了两个illustrator文件，使它们都是曲线

---

另外，是否有人知道如何在onClick上执行此动画一次…然后在下一次onClick上返回，而不是在页面加载时循环动画？谢谢

现在我意识到你在试图改变你自己的道路。问题在于您的代码：

<animate dur="2s" repeatCount="indefinite" attributeName="d" values="M20.553,16.551c-0.955,0-1.84,0.313-2.559,0.826c-0.083-0.045-8.388-4.366-8.388-4.366S17.76,8.759,17.9,8.694
c0.742,0.559,1.654,0.903,2.653,0.903c2.445,0,4.426-1.983,4.426-4.425c0-2.443-1.981-4.423-4.426-4.423
c-2.443,0-4.422,1.979-4.422,4.423c0,0.054,0.023,0.148,0.015,0.158C16.137,5.339,7.891,9.625,7.829,9.66
C7.073,9.104,6.176,8.756,5.176,8.756c-2.445,0-4.426,1.98-4.426,4.423c0,2.446,1.981,4.426,4.426,4.426
c1.117,0,2.104-0.422,2.905-1.111c0.255,0.147,8.022,4.17,8.077,4.205c-0.002,0.033-0.027,0.183-0.027,0.278
c0,2.441,1.979,4.423,4.422,4.423c2.445,0,4.426-1.981,4.426-4.423C24.979,18.53,22.998,16.551,20.553,16.551z; M17.491,19.042c-0.382,0-0.765-0.146-1.057-0.438s-6.915-6.936-6.937-6.936
c-0.022,0-6.354,6.354-6.937,6.936c-0.581,0.582-1.529,0.584-2.113,0c-0.584-0.583-0.576-1.537,0-2.114
c0.576-0.576,6.936-6.909,6.936-6.936c0-0.028-6.356-6.356-6.936-6.936s-0.584-1.53,0-2.114c0.584-0.583,1.536-0.578,2.113,0
C3.14,1.082,9.259,7.201,9.306,7.248C9.352,7.294,9.482,7.44,9.498,7.44c0.015,0,6.356-6.356,6.937-6.937s1.53-0.584,2.114,0
c0.583,0.583,0.587,1.526,0,2.113c-0.588,0.588-6.937,6.916-6.937,6.937c0,0.021,6.358,6.358,6.937,6.936
c0.577,0.578,0.583,1.53,0,2.114C18.256,18.896,17.874,19.042,17.491,19.042z"/> 

工作正常

<animate dur="30s" repeatCount="indefinite" attributeName="d" values="M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z; M-1358 1980l69 -28 35 -111 -28 -90 45 -83 45 -84 71 -42 68 -41 7 -160 42 -14 21 -7 21 -14 21 -21 13 -20 42 -56 49 -49 48 -48 28 -21 28 -21 49 -76 -77 -56 28 -56 111 -55 42 83 104 7 104 -125 7 14 7 7 90 7 49 0 42 0 14 0 14 -7 20 -14 28 -14 21 -7 35 -7 35 0 41 0 42 0 28 0 28 7 20 0 28 0 7 0 7 -7 7 -14 -21 -27 -62 -42 41 -42 84 -42 111 84 49 14 103 15 84 13 83 20 146 70 0 28 7 27 7 21 0 35 -14 42 -27 90 -14 42 -7 41 -7 49 0 49 83 21 160 34 -28 70 42 28 132 27 35 -27 111 -91 21 0 41 84 -48 139 48 55 -27 84 -42 13 -42 -7 -35 -62 -69 35 -35 104 42 42 14 76 28 35 -7 41 -28 21 -28 -14 -56 -104 -77 16 -55 12 -62 49 -90 -14 -42 -153 -83 0 -23 117 -19 98 -118 125 -14 111 42 70 -28 49 -63 0 -28 -77 -41 -28 0 -118 -49 -14 -55 -14 -21 -7 -91 -90 -21 -160 -62 -7 -42 84 -83 48 14 84 -14 55 -85 78 -96 89 -93 -16 -67 -12 -102 39 -99 38 -132 -21 0 -77 -56 -55 -14 -56 -62 -55 35 -70 -49 -83 14 -56 7 -27 -77 -21 -76 0 -72 18 -67 16 -56 77 14 28 28 69 -104 77 -90 -21 -7 -63z;  M-1358 1980l69 -28 35 -111 -28 -90 45 -83 45 -84 71 -42 68 -41 7 -160 42 -14 21 -7 21 -14 21 -21 13 -20 42 -56 49 -49 48 -48 28 -21 28 -21 49 -76 -77 -56 28 -56 111 -55 42 83 104 7 104 -125 7 14 7 7 90 7 49 0 42 0 14 0 14 -7 20 -14 28 -14 21 -7 35 -7 35 0 41 0 42 0 28 0 28 7 20 0 28 0 7 0 7 -7 7 -14 -21 -27 -62 -42 41 -42 84 -42 111 84 49 14 103 15 84 13 83 20 146 70 0 28 7 27 7 21 0 35 -14 42 -27 90 -14 42 -7 41 -7 49 0 49 83 21 160 34 -28 70 42 28 132 27 35 -27 111 -91 21 0 41 84 -48 139 48 55 -27 84 -42 13 -42 -7 -35 -62 -69 35 -35 104 42 42 14 76 28 35 -7 41 -28 21 -28 -14 -56 -104 -77 16 -55 12 -62 49 -90 -14 -42 -153 -83 0 -23 117 -19 98 -118 125 -14 111 42 70 -28 49 -63 0 -28 -77 -41 -28 0 -118 -49 -14 -55 -14 -21 -7 -91 -90 -21 -160 -62 -7 -42 84 -83 48 14 84 -14 55 -85 78 -96 89 -93 -16 -67 -12 -102 39 -99 38 -132 -21 0 -77 -56 -55 -14 -56 -62 -55 35 -70 -49 -83 14 -56 7 -27 -77 -21 -76 0 -72 18 -67 16 -56 77 14 28 28 69 -104 77 -90 -21 -7 -63z; M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z; M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z"/> 

@mike请确保在jsFiddle中单击“更新”，并给我新的链接-您链接了我的同一个jsFiddle（：@mike我现在意识到你想做什么。你的动画路径似乎是错误的。请告诉我你想做什么，并描述你是如何创建路径的？@mike我扩展了我的答案。请尝试再次检查你的观点，以确保你的路径具有完全相同的结构。此外，请用更好的描述更新你的问题，以便我他没有被否决more@mike元素的位置不应该太相关，重要的是数字应该相同并且（我不确定下一部分）你使用的是同一类型的路径是你的权利…我试着平滑所有的硬角，但它仍然不起作用，但当我用真正超光滑的边缘从头开始制作它们时，它起了作用…我想我只需要浏览原始的路径图标，确保所有类型都完全相同。谢谢你帮助我通过t他的！！
<animate dur="30s" repeatCount="indefinite" attributeName="d" values="M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z; M-1358 1980l69 -28 35 -111 -28 -90 45 -83 45 -84 71 -42 68 -41 7 -160 42 -14 21 -7 21 -14 21 -21 13 -20 42 -56 49 -49 48 -48 28 -21 28 -21 49 -76 -77 -56 28 -56 111 -55 42 83 104 7 104 -125 7 14 7 7 90 7 49 0 42 0 14 0 14 -7 20 -14 28 -14 21 -7 35 -7 35 0 41 0 42 0 28 0 28 7 20 0 28 0 7 0 7 -7 7 -14 -21 -27 -62 -42 41 -42 84 -42 111 84 49 14 103 15 84 13 83 20 146 70 0 28 7 27 7 21 0 35 -14 42 -27 90 -14 42 -7 41 -7 49 0 49 83 21 160 34 -28 70 42 28 132 27 35 -27 111 -91 21 0 41 84 -48 139 48 55 -27 84 -42 13 -42 -7 -35 -62 -69 35 -35 104 42 42 14 76 28 35 -7 41 -28 21 -28 -14 -56 -104 -77 16 -55 12 -62 49 -90 -14 -42 -153 -83 0 -23 117 -19 98 -118 125 -14 111 42 70 -28 49 -63 0 -28 -77 -41 -28 0 -118 -49 -14 -55 -14 -21 -7 -91 -90 -21 -160 -62 -7 -42 84 -83 48 14 84 -14 55 -85 78 -96 89 -93 -16 -67 -12 -102 39 -99 38 -132 -21 0 -77 -56 -55 -14 -56 -62 -55 35 -70 -49 -83 14 -56 7 -27 -77 -21 -76 0 -72 18 -67 16 -56 77 14 28 28 69 -104 77 -90 -21 -7 -63z;  M-1358 1980l69 -28 35 -111 -28 -90 45 -83 45 -84 71 -42 68 -41 7 -160 42 -14 21 -7 21 -14 21 -21 13 -20 42 -56 49 -49 48 -48 28 -21 28 -21 49 -76 -77 -56 28 -56 111 -55 42 83 104 7 104 -125 7 14 7 7 90 7 49 0 42 0 14 0 14 -7 20 -14 28 -14 21 -7 35 -7 35 0 41 0 42 0 28 0 28 7 20 0 28 0 7 0 7 -7 7 -14 -21 -27 -62 -42 41 -42 84 -42 111 84 49 14 103 15 84 13 83 20 146 70 0 28 7 27 7 21 0 35 -14 42 -27 90 -14 42 -7 41 -7 49 0 49 83 21 160 34 -28 70 42 28 132 27 35 -27 111 -91 21 0 41 84 -48 139 48 55 -27 84 -42 13 -42 -7 -35 -62 -69 35 -35 104 42 42 14 76 28 35 -7 41 -28 21 -28 -14 -56 -104 -77 16 -55 12 -62 49 -90 -14 -42 -153 -83 0 -23 117 -19 98 -118 125 -14 111 42 70 -28 49 -63 0 -28 -77 -41 -28 0 -118 -49 -14 -55 -14 -21 -7 -91 -90 -21 -160 -62 -7 -42 84 -83 48 14 84 -14 55 -85 78 -96 89 -93 -16 -67 -12 -102 39 -99 38 -132 -21 0 -77 -56 -55 -14 -56 -62 -55 35 -70 -49 -83 14 -56 7 -27 -77 -21 -76 0 -72 18 -67 16 -56 77 14 28 28 69 -104 77 -90 -21 -7 -63z; M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z; M-2203 2143l28 -91 14 -41 0 -35 -7 -21 -7 -28 0 -27 56 -21 69 -28 28 35 83 27 139 174 132 -97 7 -104 56 -21 49 -7 48 35 77 7 83 111 209 -42 90 -90 139 -70 215 -28 21 -48 14 -42 160 -7 41 56 28 -7 111 -21 56 104 76 35 42 -63 21 -153 -83 -6 34 -105 -111 -132 -49 -62 0 -70 49 -83 35 -14 35 -21 34 -21 35 -21 21 -13 28 -7 21 -7 20 -14 14 -7 7 -14 14 -21 14 -28 7 -27 7 -56 0 -56 90 21 84 35 34 -125 14 -125 125 97 14 63 139 41 63 -83 139 35 14 -28 69 -167 77 7 55 -194 493 76 77 56 194 13 63 -90 111 14 28 28 132 21 -14 90 -7 42 0 48 -7 49 7 42 7 48 21 42 7 21 14 14 27 41 56 91 21 62 35 104 -42 49 56 97 -49 49 -118 14 -28 -14 -56 -28 -111 63 21 34 63 21 55 35 -21 76 -76 63 35 354 -112 42 -90 139 -62 28 27 125 -145 -21 -98 56 -55 55 -49 0 -35 0 -27 -7 -56 0 -56 0 -62 0 -28 35 -76 42 -160 159 -507 -48 -598 -77 -167 -27 -111 -70 -104 -160 7 -118 -257 139 -98 -28 -76 35 -104 -7 -111 84 -28 76 -97 56 -77 -14 -7 -63 -132 -14 -41 -83 -21 0 -111 90 -35 28 -132 -28 -42 -28 28 -69 -160 -35 14 -111 -70 -90z"/>