SVG动画（变形）onClick

Question

我已按照此页面的教程进行操作： http://www.carto.net/svg/samples/path_morphing.shtml

两个形状之间只是相互闪烁。有谁知道为什么他们不动画/互相变形？

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

http://jsfiddle.net/c5krG/

<path  stroke="deepskyblue" stroke-width="15" d="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">
<animate dur="&animDuration;" 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"/> 

两个svg上应该有相同数量的点数，每个点数为18个点，所有点都相同，我通过两个插图文件并使它们都弯曲。

此外，有人会知道如何动画onClick一次..然后再次回到onClick而不是在页面加载上循环动画？谢谢！

Answer 1

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

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

这是因为如果你replace it with the original它可以正常工作

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

问题是您的路径完全不匹配。你可以看到它从一个形状跳到下一个in this jsFiddle

的方式