Start and stop animations via input messages - bartbutenaers/node-red-contrib-ui-svg GitHub Wiki
An animation can be used to change a attribute (of a specified SVG element) from value X to value Y, in a specified time interval. But it also possible to start and stop those animations, via input messages.
Start from following test flow:
[{"id":"c363e439.21b9c8","type":"ui_svg_graphics","z":"ae5f2a27.a96178","group":"23b16fbe.b0541","order":23,"width":"12","height":"12","svgString":"<svg\n xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n xmlns:cc=\"http://creativecommons.org/ns#\"\n xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\n xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n id=\"svg2\"\n version=\"1.1\"\n inkscape:version=\"0.48.2 r9819\"\n width=\"600\"\n height=\"600\"\n viewBox=\"0 0 600 600\"\n sodipodi:docname=\"gear-anim.svg\">\n <sodipodi:namedview\n pagecolor=\"#ffffff\"\n bordercolor=\"#666666\"\n borderopacity=\"1\"\n objecttolerance=\"10\"\n gridtolerance=\"10\"\n guidetolerance=\"10\"\n inkscape:pageopacity=\"0\"\n inkscape:pageshadow=\"2\"\n inkscape:window-width=\"1739\"\n inkscape:window-height=\"838\"\n id=\"namedview4\"\n showgrid=\"false\"\n borderlayer=\"true\"\n inkscape:showpageshadow=\"false\"\n inkscape:zoom=\"0.48750832\"\n inkscape:cx=\"68.256195\"\n inkscape:cy=\"279.24558\"\n inkscape:window-x=\"450\"\n inkscape:window-y=\"46\"\n inkscape:window-maximized=\"0\"\n inkscape:current-layer=\"svg2\"\n showguides=\"false\">\n <inkscape:grid\n type=\"xygrid\"\n id=\"grid3757\"\n empspacing=\"100\"\n visible=\"true\"\n enabled=\"true\"\n snapvisiblegridlinesonly=\"false\" />\n </sodipodi:namedview>\n <metadata\n id=\"metadata8\">\n <rdf:RDF>\n <cc:Work\n rdf:about=\"\">\n <dc:format>image/svg+xml</dc:format>\n <dc:type\n rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n <dc:title></dc:title>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs\n id=\"defs6\" />\n\n <path\n style=\"fill:#65c4ff;fill-opacity:1\"\n d=\"m 278.12748,498.21403 c -69.69859,-8.4164 -130.5709,-52.17746 -159.96831,-115.00115 -7.28202,-15.56203 -12.94615,-34.02475 -16.50254,-53.79151 -1.27872,-7.1073 -1.64134,-13.98646 -1.65511,-31.39931 -0.0155,-19.66101 0.23679,-23.64351 2.13372,-33.67463 7.81573,-41.32999 25.60367,-76.04296 53.80536,-105.00057 11.49805,-11.80625 19.59945,-18.56568 32.83899,-27.39936 23.10389,-15.41533 48.98418,-25.69085 77.04457,-30.58977 15.79947,-2.758357 41.78884,-3.370902 57.60632,-1.35773 35.49963,4.5182 67.95944,17.55194 96.51725,38.75504 12.06718,8.95944 32.13673,29.10144 41.17254,41.32114 19.21991,25.99232 31.07564,54.13736 37.22336,88.36681 1.26773,7.05834 1.63946,14.00425 1.65637,30.94425 0.0191,18.88718 -0.26246,23.42102 -2.07846,33.50423 -7.75191,43.04356 -27.57354,80.38704 -58.57872,110.36074 -29.7519,28.7622 -65.12608,46.38751 -107.84789,53.73566 -9.77436,1.68118 -43.2331,2.44992 -53.36745,1.22616 z m 25.2827,-19.30462 c 0.49457,-0.62571 1.1303,-4.00456 1.41272,-7.50854 0.8011,-9.93948 1.26713,-10.42888 9.95465,-10.45401 4.98138,-0.0144 5.40438,0.49727 7.13893,8.63377 1.72009,8.06849 2.27727,8.86791 5.71554,8.19956 1.59418,-0.3099 4.02991,-0.77908 5.41282,-1.04263 l 2.51427,-0.47916 -0.23591,-8.79317 -0.23591,-8.79316 5.28855,-1.6781 c 2.90863,-0.92294 5.91063,-1.43969 6.671,-1.1483 0.76036,0.29138 2.85881,3.80812 4.66327,7.81497 2.11254,4.69109 3.79354,7.27806 4.72091,7.26519 2.71509,-0.0376 9.18672,-3.5267 9.18672,-4.95273 0,-0.78166 -0.81945,-4.37461 -1.82118,-7.98433 -2.10482,-7.58543 -1.86609,-8.08731 5.31718,-11.17493 4.88255,-2.09868 5.68046,-1.67621 10.92555,5.78457 2.16745,3.08311 4.59209,5.60565 5.38809,5.60565 0.7959,0 3.21245,-1.03314 5.37009,-2.29589 4.40054,-2.57539 4.40136,-2.45081 -0.0727,-11.26888 -3.352,-6.60598 -3.09864,-7.66649 2.75918,-11.54946 l 5.08182,-3.36853 6.263,6.20666 6.26309,6.20666 3.672,-2.54129 c 6.16927,-4.26953 6.16527,-4.22498 1.04309,-11.50886 -2.54146,-3.61398 -4.62082,-7.00309 -4.62082,-7.53136 0,-1.75789 7.64127,-8.7658 9.53118,-8.74117 1.02345,0.0133 4.29036,1.85634 7.25991,4.09557 2.96945,2.2392 5.89509,4.0713 6.50127,4.0713 1.16418,0 7.69382,-6.78501 7.69382,-7.9947 0,-0.38967 -2.46073,-3.14016 -5.46818,-6.11224 -3.00746,-2.97207 -5.46819,-6.07442 -5.46819,-6.8941 0,-1.92557 6.11709,-9.94321 7.58619,-9.94321 0.61772,0 4.15427,1.45067 7.85899,3.2237 3.70473,1.77305 7.17909,3.04625 7.72082,2.82934 0.54173,-0.21691 2.01027,-2.31172 3.26336,-4.65513 l 2.27846,-4.26074 -2.35346,-1.98156 c -1.29436,-1.08985 -4.26763,-3.30417 -6.60736,-4.9207 -2.72818,-1.885 -4.25391,-3.60958 -4.25391,-4.80841 0,-2.6101 4.34718,-10.91 5.71428,-10.91 0.61972,0 3.9949,0.81911 7.50045,1.82024 3.50554,1.00115 7.037,1.82026 7.84763,1.82026 1.44237,0 4.45564,-6.21656 4.45564,-9.19216 0,-0.8533 -2.832,-2.71909 -7.29082,-4.80343 -7.97891,-3.7298 -8.08063,-3.90907 -6.27827,-11.05737 1.48546,-5.89135 2.25827,-6.25041 11.35673,-5.2764 8.89372,0.95208 8.83954,0.98634 9.89109,-6.25502 l 0.62072,-4.27494 -3.46618,-0.90989 c -1.90645,-0.50045 -5.40182,-1.38673 -7.76763,-1.96952 -2.36573,-0.58279 -4.72609,-1.57068 -5.24518,-2.1953 -0.9901,-1.19136 0.01,-11.74008 1.22872,-12.95687 0.35273,-0.35226 3.39382,-0.78008 6.758,-0.9507 9.57245,-0.4855 9.90418,-0.63332 10.55591,-4.7033 0.31627,-1.97518 0.19882,-4.57952 -0.26109,-5.78741 -0.76346,-2.00534 -1.49609,-2.24687 -8.43091,-2.77956 -9.23718,-0.70954 -10.06063,-1.49407 -9.68309,-9.22528 l 0.26546,-5.43596 4.10118,-1.11063 c 2.25554,-0.61086 5.844,-1.56029 7.97436,-2.10984 3.70773,-0.95651 3.86936,-1.14355 3.78236,-4.37709 -0.212,-7.88444 -0.27,-7.92853 -10.43354,-7.92853 l -9.06973,0 -1.33654,-5.27409 c -0.89418,-3.52843 -1.04482,-5.7361 -0.45491,-6.66994 0.48491,-0.76772 3.75209,-2.61652 7.26036,-4.10845 3.50827,-1.49193 6.70445,-3.03417 7.10255,-3.4272 0.56027,-0.55311 -2.58982,-11.0617 -3.29555,-10.9939 -0.0891,0.008 -3.23818,0.82067 -6.99754,1.80465 -10.15409,2.65775 -10.20728,2.64315 -13.20555,-3.6215 -2.55591,-5.34024 -2.57263,-5.47686 -0.89791,-7.32495 0.93864,-1.03576 4.08582,-3.32653 6.99364,-5.09059 2.90791,-1.76406 5.28709,-3.60762 5.28709,-4.0968 0,-1.25009 -2.69118,-6.41528 -4.29627,-8.24579 -1.24682,-1.42196 -1.83091,-1.3086 -8.20609,1.59272 -3.775,1.71802 -7.40882,3.12366 -8.07518,3.12366 -1.53491,0 -7.67455,-7.95461 -7.67455,-9.94322 0,-0.81968 2.46073,-3.92202 5.46818,-6.8941 3.00746,-2.97207 5.46809,-5.83522 5.46809,-6.36254 0,-1.60565 -5.51027,-7.74439 -6.95145,-7.74439 -0.74291,0 -3.78073,1.64795 -6.75073,3.66211 -2.97,2.01416 -6.05372,3.91264 -6.85272,4.21883 -1.74764,0.66973 -9.51982,-6.56577 -9.51982,-8.86246 0,-0.83196 2.04609,-4.31541 4.54682,-7.74101 l 4.54681,-6.22834 -2.89636,-2.98427 c -4.71009,-4.85301 -5.629,-4.74136 -12.10727,1.47096 -3.17891,3.04847 -6.08054,5.54268 -6.448,5.54268 -1.79418,0 -10.426,-6.65466 -10.426,-8.03793 0,-0.86335 1.43546,-4.56084 3.18982,-8.21663 1.75436,-3.6558 3.18973,-6.81317 3.18973,-7.01638 0,-0.48923 -6.41855,-4.46767 -8.35891,-5.18112 -1.13064,-0.41577 -2.71973,1.07676 -6.161,5.78691 -2.55054,3.49097 -5.20673,6.56541 -5.90273,6.83212 -1.67172,0.64062 -10.4939,-3.85975 -11.20763,-5.71722 -0.30718,-0.79943 0.32718,-4.46016 1.40982,-8.13494 1.08263,-3.6748 1.96836,-7.07021 1.96836,-7.54536 0,-0.79899 -9.97963,-5.02088 -10.49445,-4.43968 -0.12646,0.14275 -1.92264,3.63837 -3.99146,7.76807 -2.06891,4.12969 -4.20654,7.50852 -4.75036,7.50852 -2.83109,0 -10.94827,-3.06385 -11.62673,-4.38854 -0.43018,-0.83999 -0.46345,-3.9846 -0.0736,-6.98802 1.34391,-10.36088 1.57882,-9.9466 -6.22755,-10.98075 l -4.37781,-0.57996 -2.51382,8.38634 -2.51382,8.38634 -5.87595,-0.37364 c -3.23177,-0.20551 -6.38241,-0.87944 -7.00144,-1.49763 -0.62646,-0.62562 -1.27743,-4.23841 -1.46817,-8.14815 -0.18846,-3.8633 -0.75861,-7.53612 -1.26701,-8.16183 -1.2003,-1.47728 -9.32325,-1.47728 -10.49034,0 -0.49433,0.62571 -1.15938,4.07257 -1.47788,7.65968 -0.31851,3.58713 -0.80755,7.11655 -1.08676,7.84317 -0.56776,1.47757 -12.03749,3.06167 -13.24614,1.82944 -0.38979,-0.39738 -1.68349,-4.20374 -2.87489,-8.45857 -2.39345,-8.54765 -2.09133,-8.3512 -10.49556,-6.82454 l -2.97178,0.53985 0.23771,8.82415 0.23771,8.82416 -5.2885,1.67809 c -2.90867,0.92295 -5.91062,1.43969 -6.67099,1.1483 -0.76036,-0.29138 -2.85883,-3.80811 -4.66326,-7.81496 -2.11258,-4.69109 -3.7936,-7.27806 -4.72097,-7.26519 -2.71503,0.0377 -9.18675,3.52669 -9.18675,4.95273 0,0.78166 0.81955,4.37461 1.8212,7.98433 2.10487,7.58543 1.86608,8.0873 -5.31714,11.17493 -4.88253,2.09868 -5.68048,1.67621 -10.92554,-5.78457 -2.16746,-3.08311 -4.5921,-5.60566 -5.38806,-5.60566 -0.79596,0 -3.21253,1.03315 -5.37015,2.29589 -4.40051,2.5754 -4.40132,2.45082 0.0732,11.26889 3.34672,6.59551 3.09443,7.66931 -2.70526,11.5137 -5.77789,3.82998 -5.30686,3.98104 -12.84228,-4.11857 l -4.65544,-5.004 -3.75408,2.59805 c -6.26226,4.33388 -6.25598,4.26937 -1.12507,11.56564 2.54144,3.61398 4.62079,7.00309 4.62079,7.53135 0,1.7579 -7.64124,8.76581 -9.53116,8.74118 -1.02344,-0.0134 -4.29041,-1.85634 -7.25993,-4.09557 -2.96951,-2.23921 -5.8951,-4.07131 -6.5013,-4.07131 -1.16685,0 -7.69377,6.78633 -7.69377,7.99957 0,0.39232 2.46067,3.10696 5.46815,6.03251 3.00748,2.92557 5.46814,5.93929 5.46814,6.69717 0,2.01703 -4.77151,9.24085 -6.46082,9.78137 -0.79661,0.25488 -4.65475,-0.99578 -8.57363,-2.77925 -3.91889,-1.78348 -7.57329,-3.06339 -8.12088,-2.84424 -0.5476,0.21916 -2.02091,2.31581 -3.27403,4.65922 l -2.27839,4.26075 2.35343,1.98155 c 1.29437,1.08985 4.26767,3.30417 6.60733,4.9207 2.7282,1.885 4.25392,3.60958 4.25392,4.80842 0,2.61009 -4.34717,10.90999 -5.71423,10.90999 -0.61971,0 -3.99491,-0.81911 -7.50045,-1.82025 -8.68813,-2.48122 -9.13703,-2.40505 -10.83733,1.83867 -2.44758,6.10883 -2.17155,6.59867 5.82487,10.33667 8.03812,3.75751 8.24051,4.12993 6.10963,11.24303 -1.75022,5.84244 -2.13973,6.0227 -10.808,5.00134 -6.19117,-0.72949 -7.79387,-0.66162 -8.62108,0.36505 -1.44987,1.79943 -2.39635,9.65067 -1.24879,10.35893 0.51518,0.31798 4.00869,1.30138 7.76337,2.18535 4.31644,1.01623 7.1371,2.18647 7.6709,3.18253 0.84205,1.57124 -0.0385,11.39312 -1.11802,12.4712 -0.3065,0.3061 -3.34849,0.73992 -6.75999,0.96406 -9.80494,0.6442 -9.99362,0.72891 -10.64194,4.77782 -0.31627,1.97519 -0.19782,4.58206 0.26323,5.79306 0.76866,2.01902 1.46518,2.24473 8.38951,2.71869 9.22969,0.63176 10.10393,1.46628 9.72232,9.2805 l -0.26547,5.43596 -4.10111,1.11064 c -2.25561,0.61085 -5.89831,1.57486 -8.0949,2.14224 l -3.9938,1.03162 0.52377,5.06784 c 0.28805,2.78732 0.8658,5.40944 1.28387,5.82694 0.41806,0.4175 4.02531,0.39341 8.0161,-0.0536 3.99079,-0.44693 7.84781,-0.48186 8.57114,-0.0776 1.42341,0.79549 3.68253,7.36609 3.70492,10.77565 0.0115,1.76075 -1.25791,2.69334 -7.7327,5.68066 -4.2606,1.96574 -7.74654,3.76691 -7.74654,4.00261 0,0.57237 3.73137,10.51253 3.93875,10.49261 0.0893,-0.008 3.23819,-0.82067 6.99754,-1.80465 10.14948,-2.65655 10.20861,-2.64043 13.19422,3.59776 3.04978,6.37223 3.06739,6.33408 -5.49721,11.90659 -3.23087,2.10214 -5.87429,4.20387 -5.87429,4.6705 0,1.21608 2.71549,6.40197 4.29626,8.20478 1.24685,1.42196 1.83093,1.3086 8.2061,-1.59272 3.77503,-1.71801 7.40887,-3.12365 8.07521,-3.12365 1.53487,0 7.67449,7.9546 7.67449,9.94321 0,0.81968 -2.46066,3.92202 -5.46813,6.8941 -3.00748,2.97207 -5.46815,5.83522 -5.46815,6.36255 0,1.61428 5.51402,7.74439 6.96606,7.74439 0.75087,0 3.95144,-1.843 7.11241,-4.09557 3.16095,-2.25255 6.29474,-4.09556 6.96399,-4.09556 1.62314,0 9.03233,7.3201 9.03233,8.92373 0,0.69505 -2.05203,4.17238 -4.56006,7.7274 l -4.56006,6.46366 2.90959,2.99786 c 4.72452,4.86789 5.63916,4.75792 12.12048,-1.45734 3.17896,-3.04848 6.08056,-5.54268 6.448,-5.54268 1.79424,0 10.42598,6.65465 10.42598,8.03792 0,0.86336 -1.43539,4.56085 -3.18975,8.21664 -1.75436,3.65579 -3.18975,6.81316 -3.18975,7.01637 0,0.49227 6.42365,4.46944 8.38328,5.19048 1.15718,0.42577 2.57468,-0.86707 5.61363,-5.12002 6.17825,-8.64633 6.10555,-8.61385 12.47525,-5.57352 6.23087,2.97405 6.33518,3.32922 3.60263,12.26626 -0.99483,3.25369 -1.81193,6.39833 -1.81575,6.98807 -0.006,0.93899 9.88856,5.32424 10.48755,4.64803 0.12645,-0.14276 1.92259,-3.63839 3.99144,-7.76808 2.06884,-4.12969 4.20648,-7.50852 4.75029,-7.50852 2.91862,0 10.96553,3.087 11.72085,4.49642 0.48195,0.89931 0.74089,1.79136 0.57542,1.98232 -0.16548,0.19095 -0.57384,3.47257 -0.90748,7.29248 -0.68371,7.82789 -0.85227,7.60687 6.54923,8.58739 l 4.38759,0.58125 2.25476,-8.05696 2.25476,-8.05697 6.08255,0 c 3.50683,0 6.54427,0.46125 7.17287,1.08921 0.59967,0.59907 1.28611,4.28507 1.52545,8.19113 0.23933,3.90605 0.84452,7.61386 1.34487,8.23957 0.50035,0.62571 2.85984,1.13765 5.24332,1.13765 2.38348,0 4.73825,-0.51194 5.23284,-1.13765 z\"\n id=\"gear-B\"\n inkscape:connector-curvature=\"0\">\n </path>\n <path\n id=\"gear-A\"\n style=\"fill:#ff6584;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none\"\n d=\"m 299.8116,343.84392 c 22.58158,-0.28673 42.62107,15.91793 46.43184,38.83342 4.20497,25.28611 -12.94871,49.21058 -38.28321,53.4075 -25.33444,4.19684 -49.29925,-12.93246 -53.50423,-38.2185 -4.20497,-25.28607 12.94867,-49.21043 38.2832,-53.40749 2.37512,-0.39345 4.73639,-0.58552 7.0724,-0.61493 z m -9.90136,-41.04722 c -0.60003,-0.0462 -1.28509,0.042 -1.96797,0.21523 -1.36561,0.34605 -0.74081,0.21174 -2.12172,0.49195 -1.38076,0.28056 -2.63729,0.86373 -2.89046,1.78333 -0.51441,1.86727 3.07706,15.4993 2.39847,17.2183 -0.32994,0.83581 -2.72912,1.43754 -7.3184,3.0747 -4.58927,1.63712 -6.68027,2.67155 -7.47214,2.24452 -1.62863,-0.87866 -7.65745,-13.62998 -9.25562,-14.7278 -0.78725,-0.54035 -2.14547,-0.18147 -3.38245,0.49196 -1.2372,0.67338 -0.66918,0.37069 -1.93722,0.9839 -1.26811,0.61303 -2.31994,1.5371 -2.33697,2.49051 -0.0346,1.93613 6.81083,14.21663 6.58041,16.04992 -0.11188,0.89143 -2.53063,1.70518 -4.55094,3.47441 -2.02037,1.76914 -3.15897,4.04337 -4.05894,4.02785 -1.85076,-0.031 -13.08056,-8.55378 -15.00579,-8.79363 -0.94791,-0.11784 -1.98033,0.80155 -2.76746,1.9678 -0.78749,1.16614 -0.41786,0.65622 -1.26073,1.78332 -0.8428,1.1271 -1.37787,2.40483 -0.95323,3.25919 0.86287,1.73423 12.80727,9.96526 13.28381,11.25339 0.47647,1.28815 -1.01754,2.73798 -3.29021,7.04106 -2.2727,4.30309 -3.21396,6.58718 -4.08969,6.79508 -1.80085,0.42728 -14.77217,-5.04067 -16.69701,-4.79653 -0.94767,0.12044 -1.7409,1.25801 -2.21397,2.58274 -0.47319,1.32481 -0.23226,0.72886 -0.76874,2.0293 -0.53682,1.30054 -0.7465,2.6904 -0.123,3.41292 1.26661,1.46669 14.59995,6.07397 15.65153,7.5945 0.51136,0.73946 -0.78853,2.96102 -1.81422,5.90342 -1.02576,2.94225 -0.28405,5.36402 -0.95324,5.96491 -1.37605,1.2361 -15.40104,2.6477 -16.97376,3.78188 -0.77423,0.55826 -0.8966,1.96249 -0.67649,3.35142 0.22038,1.38907 0.124,0.75412 0.27675,2.15229 0.15266,1.3982 0.64338,2.70764 1.53748,3.04395 1.8156,0.68227 15.72087,-1.63188 17.3735,-0.79942 0.80366,0.40467 1.15429,2.68426 2.42921,7.37927 1.27487,4.69485 2.15951,7.00051 1.66048,7.74824 -1.02604,1.53782 -14.28661,6.35271 -15.52853,7.84048 -0.61148,0.73269 -0.40454,2.12156 0.15375,3.41291 0.5583,1.2912 0.33496,0.71274 0.83024,2.0293 0.49527,1.31689 1.295,2.4475 2.24472,2.552 1.92843,0.2118 14.82773,-5.47072 16.63551,-5.07325 0.87917,0.19321 1.76042,3.96281 3.0442,5.71894 1.28374,1.75613 3.80471,4.33238 3.7207,5.22698 -0.17242,1.83943 -9.54582,12.36894 -9.93211,14.2666 -0.19012,0.93446 0.67843,2.04852 1.78348,2.92096 1.10508,0.87255 0.59872,0.45885 1.66047,1.38362 1.06173,0.92472 2.31213,1.55663 3.19796,1.19913 1.79833,-0.72641 10.45794,-11.85419 12.23832,-12.36028 0.86572,-0.24574 2.67016,1.22284 6.79566,3.81262 4.12559,2.58975 6.31662,3.69382 6.4574,4.5813 0.28989,1.82478 -6.15483,14.33104 -6.05766,16.26514 0.0477,0.95243 1.14175,1.82639 2.42922,2.39827 1.28735,0.57186 0.70971,0.28937 1.96797,0.92241 1.25834,0.63333 2.61314,0.9346 3.38245,0.36896 1.56188,-1.1486 7.19508,-14.07372 8.79437,-15.00452 0.77766,-0.45259 2.87049,0.947 6.14991,2.15229 3.27936,1.2053 5.78321,0.80442 6.30366,1.53734 1.07057,1.50731 0.8369,15.58944 1.78348,17.27981 0.466,0.8322 1.85165,1.13351 3.25945,1.07614 1.40794,-0.0568 0.74338,-0.0708 2.15247,-0.0615 1.40915,0.0116 2.79036,-0.32114 3.22871,-1.16839 0.88927,-1.72095 0.17957,-15.76857 1.19923,-17.31054 0.49596,-0.74975 2.80601,-0.81718 7.62589,-1.53735 4.82002,-0.72029 7.21612,-1.31904 7.90264,-0.73793 1.41149,1.19549 4.69011,14.89244 6.02691,16.2959 0.65836,0.69108 2.06343,0.61934 3.4132,0.21522 1.34975,-0.40396 0.72336,-0.24554 2.09097,-0.58419 1.36792,-0.33855 2.61494,-0.97682 2.82896,-1.90631 0.43411,-1.8871 -3.74123,-15.34903 -3.13645,-17.09532 0.29418,-0.84916 2.85323,-1.09755 5.81166,-3.0132 2.95848,-1.91575 4.43322,-4.02936 5.31968,-3.87412 1.8233,0.31935 11.57341,10.47067 13.43755,11.00741 0.91819,0.26423 2.11483,-0.47724 3.07496,-1.5066 0.96033,-1.02924 0.49795,-0.58606 1.50673,-1.56809 1.00881,-0.98217 1.73118,-2.16487 1.44523,-3.0747 -0.58086,-1.84783 -10.98431,-11.34796 -11.34659,-13.1597 -0.17599,-0.88108 1.51968,-2.69215 4.48944,-6.54911 2.96981,-3.85698 4.14553,-5.83419 5.04292,-5.90341 1.84584,-0.14166 13.83542,7.28957 15.77453,7.34852 0.95513,0.0285 1.90839,-1.00989 2.58296,-2.24453 0.67457,-1.23481 0.3429,-0.67466 1.07624,-1.87557 0.73322,-1.20072 1.14876,-2.54076 0.64574,-3.35141 -1.02155,-1.64623 -13.46663,-8.26555 -14.2678,-9.93128 -0.38946,-0.80985 0.73563,-1.54376 1.75273,-5.74969 1.01715,-4.2058 0.38684,-6.68496 1.19923,-7.0718 1.67053,-0.79611 15.54331,1.84179 17.3735,1.19914 0.90116,-0.31665 1.41562,-1.6188 1.59898,-3.01321 0.18336,-1.39428 0.0879,-0.76829 0.33824,-2.15229 0.2508,-1.38421 0.14675,-2.77585 -0.61499,-3.35142 -1.5474,-1.16804 -15.5636,-2.88504 -16.91226,-4.15084 -0.65586,-0.61542 0.11023,-3.02618 -0.39974,-6.73359 -0.50993,-3.70729 -1.60185,-5.96607 -1.04549,-6.67209 1.1442,-1.45252 14.72644,-5.22507 16.08202,-6.6106 0.66728,-0.68229 0.54698,-2.08173 0.0922,-3.41292 -0.45433,-1.33109 -0.25595,-0.70838 -0.64574,-2.06004 -0.38981,-1.35135 -1.09099,-2.55766 -2.02947,-2.73648 -1.90577,-0.36317 -15.23371,4.28942 -17.0045,3.75113 -0.86113,-0.26174 -1.65864,-2.60545 -3.6592,-7.04105 -2.00046,-4.43575 -3.19251,-6.40364 -2.82896,-7.22555 0.7479,-1.69024 12.99126,-8.71501 13.9603,-10.39247 0.47704,-0.82628 0.033,-2.14354 -0.73799,-3.32067 -0.77106,-1.17717 -0.45505,-0.63195 -1.16848,-1.84483 -0.71318,-1.21267 -1.691,-2.21109 -2.64447,-2.15228 -1.93646,0.11998 -13.6793,7.92372 -15.52852,7.84047 -0.89927,-0.0402 -1.89527,-2.4087 -3.8437,-4.42755 -1.94843,-2.01882 -4.32161,-2.91744 -4.39719,-3.81263 -0.15567,-1.84106 7.21221,-13.83719 7.2569,-15.7732 0.0221,-0.95345 -1.03327,-1.88808 -2.27547,-2.552 -1.24199,-0.66407 -0.66716,-0.35313 -1.87572,-1.07614 -1.20871,-0.72307 -2.5741,-1.12305 -3.38245,-0.61494 -1.64203,1.03184 -8.17695,13.48538 -9.83986,14.29734 -0.8087,0.39454 -2.97806,-0.76232 -7.47215,-2.64424 -4.49412,-1.88208 -6.71505,-2.53363 -7.01089,-3.38217 -0.60813,-1.7452 3.51247,-15.17821 3.07495,-17.06457 -0.21588,-0.92895 -1.42982,-1.60095 -2.79821,-1.93706 -1.36838,-0.33588 -0.77103,-0.18291 -2.12172,-0.58419 -1.35009,-0.40145 -2.7562,-0.44623 -3.4132,0.24598 -1.33409,1.4058 -4.55617,15.09769 -5.96541,16.29589 -0.68532,0.58247 -3.03122,-0.43718 -5.96542,-0.55344 -2.93424,-0.11635 -5.30451,0.82484 -5.96541,0.21523 -1.35951,-1.25415 -4.04398,-15.0829 -5.31968,-16.54188 -0.31422,-0.35916 -0.81444,-0.53808 -1.41448,-0.58419 z\"\n inkscape:connector-curvature=\"0\">\n </path>\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"rotate_gearA","targetId":"gear-A","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,300,390","toValue":"360,300,390","trigger":"msg","duration":"10","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1005","delayUnit":"ms","custom":""},{"id":"rotate_gearB","targetId":"gear-B","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"360,300,300","toValue":"0,300,300","trigger":"msg","duration":"21176","durationUnit":"ms","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":true,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":740,"y":1060,"wires":[[]]},{"id":"7e84c549.092b4c","type":"inject","z":"ae5f2a27.a96178","name":"Start animation","topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='rotate_gear']\",\"action\":\"start\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":1060,"wires":[["c363e439.21b9c8"]]},{"id":"5310b15.10e675","type":"inject","z":"ae5f2a27.a96178","name":"Stop animation","topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='rotate_gear']\",\"action\":\"stop\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":1100,"wires":[["c363e439.21b9c8"]]},{"id":"23b16fbe.b0541","type":"ui_group","z":"","name":"test","tab":"3d0faef1.feef72","disp":true,"width":"12","collapse":false},{"id":"3d0faef1.feef72","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
-
There are two different animations, each with their own unique id:
-
Each animation has a target id, which is the id of the SVG element that we want to animate:
-
And of course the animation trigger will be input messages:
-
The input message to start both animations can look like this:
{ "command": "trigger_animation", "selector": "[id^='rotate_gear']", "action": "start" }
In the selector, you need to specify the id of an animation element! A CSS selector has been used to select all animation elements, whose id starts with 'rotate_gear'. This means that both animations will be triggered ...
Finally a small demo to show the result: