Problems with animations using rotate ?

Hi,

Firstly let me say this is just what I was looking for my home setup so great work. I'm a newbie with regard to "SVG" so not sure if this is an issue or just me doing something wrong.

I used the SVG editor to import an svg element (picture of a fan) I would like to make the blade rotate in a circle based on state from an input message.

I named the path that contains the fan blade but cannot select it in the animation editor. If I select the id "fan" (the whole object ?) I still don't get any rotation. Could you point me in the right direction please ?

This is copied from the svg source view.


      <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
        <path d="M1636 5109 c-826 -73 -1504 -718 -1621 -1542 -19 -133 -19 -385 0 -512 43 -284 150 -551 315 -787 77 -109 283 -321 390 -400 173 -127 360 -221 562 -282 287 -86 607 -99 900 -36 527 114 989 473 1231 955 84 169 155 403 177 585 15 125 12 357 -6 479 -123 837 -793 1467 -1639 1540 -135 12 -168 12 -309 0z m494 -312 c534 -127 939 -494 1110 -1006 59 -174 74 -276 74 -481 0 -188 -12 -280 -60 -438 -164 -544 -634 -959 -1199 -1058 -135 -23 -375 -23 -510 0 -566 99 -1035 514 -1200 1061 -48 160 -60 247 -59 445 1 150 5 204 22 286 31 146 65 244 131 379 195 398 557 691 987 801 150 38 206 43 409 39 160 -3 207 -7 295 -28z" />
        <path d="M1714,4642c-78,-27,-148,-77,-225,-161c-113,-122,-179,-281,-179,-431c0,-113,48,-263,110,-347l27,-36l-43,-59c-23,-32,-45,-67,-49,-77c-5,-17,-33,-7,-258,92c-242,106,-255,111,-322,111c-86,0,-143,-24,-208,-90c-123,-126,-150,-326,-65,-485c60,-114,233,-256,367,-304c161,-56,373,-30,521,65l60,40l46,-36c26,-19,59,-41,75,-49l28,-15l-96,-217c-123,-283,-125,-287,-125,-361c1,-153,129,-280,315,-312c85,-15,168,-2,253,40c87,43,227,190,276,291c39,78,68,197,68,274c0,109,-45,252,-108,344l-30,45l33,40c18,23,40,56,49,74c10,19,23,32,29,29c7,-3,118,-51,247,-108c234,-104,235,-104,315,-104c97,0,156,26,216,94c113,128,139,314,64,466c-58,119,-225,262,-368,314c-63,22,-88,26,-197,26c-144,0,-211,-18,-324,-86l-67,-40l-35,26c-19,15,-52,37,-74,49l-39,22l106,239c96,219,105,247,110,316c5,67,2,84,-19,130c-59,128,-200,209,-362,209c-41,-1,-92,-8,-122,-18ZM1921,3485c82,-58,112,-178,67,-264c-46,-90,-145,-137,-235,-113c-198,53,-220,323,-33,401c14,6,55,10,92,8c56,-2,74,-8,109,-32Z" elementId="fan_blade" class="fan_blade" />
        <path d="M1421,1153c-12,-65,-43,-235,-69,-378l-47,-260l-300,-5c-285,-5,-302,-6,-341,-27c-58,-31,-103,-79,-130,-138c-21,-44,-24,-65,-24,-177c0,-125,0,-127,26,-147c27,-21,27,-21,1266,-21l1240,0l30,30l30,31l-4,117c-5,135,-22,186,-85,249c-77,77,-81,78,-418,81l-300,3l-68,376c-37,207,-69,378,-71,380c-2,2,-34,-1,-72,-7c-172,-25,-453,-22,-610,6l-32,6l-21,-119Z" />
      </g>
    </svg></g>```

Hi, It seems that the SVG is incomplete (it starts with but there is no opening elementId="fan_blade", but I don't see somewhere elementId="fan", so it is not clear to me what you mean with "the whole object"? Bart

Is this any help to see what I'm doing ?

[{"id":"1add694f.e89217","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"47d96b9.8687594","type":"ui_svg_graphics","z":"1add694f.e89217","group":"d06516d3.15555","order":23,"width":"12","height":"12","svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/>\n <g id=\"g_fan\" transform=\"matrix(6.27128, 0.0294742, -0.0294742, 6.27128, -191.716, -159.136)\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"6.87419\" height=\"6.87419\" viewBox=\"0 0 360 464\" preserveAspectRatio=\"xMidYMid meet\" id=\"e1_fan\" x=\"33.623\" y=\"27.2676\">\n <g transform=\"translate(0.000000,464.000000) scale(0.100000,-0.100000)\" fill=\"#000000\" stroke=\"none\">\n <path d=\"M1636,4629c-826,-73,-1504,-718,-1621,-1542c-19,-133,-19,-385,0,-512c43,-284,150,-551,315,-787c77,-109,283,-321,390,-400c173,-127,360,-221,562,-282c88,-26,114,-38,116,-52c1,-11,-19,-136,-46,-279l-47,-260l-300,-5c-285,-5,-302,-6,-341,-27c-58,-31,-103,-79,-130,-138c-21,-44,-24,-65,-24,-177c0,-125,0,-127,26,-147c27,-21,27,-21,1266,-21l1240,0l30,30l30,31l-4,117c-5,135,-22,186,-85,249c-77,77,-81,78,-418,81l-300,3l-51,280l-50,279l41,11c657,172,1154,671,1314,1319c39,161,51,260,51,438c0,938,-713,1710,-1655,1791c-135,12,-168,12,-309,0ZM2130,4317c534,-127,939,-494,1110,-1006c59,-174,74,-276,74,-481c0,-188,-12,-280,-60,-438c-164,-544,-634,-959,-1199,-1058c-135,-23,-375,-23,-510,0c-566,99,-1035,514,-1200,1061c-48,160,-60,247,-59,445c1,150,5,204,22,286c31,146,65,244,131,379c195,398,557,691,987,801c150,38,206,43,409,39c160,-3,207,-7,295,-28Z\"/>\n <path d=\"M1714,4162c-78,-27,-148,-77,-225,-161c-113,-122,-179,-281,-179,-431c0,-113,48,-263,110,-347l27,-36l-43,-59c-23,-32,-45,-67,-49,-77c-5,-17,-33,-7,-258,92c-242,106,-255,111,-322,111c-86,0,-143,-24,-208,-90c-123,-126,-150,-326,-65,-485c60,-114,233,-256,367,-304c161,-56,373,-30,521,65l60,40l46,-36c26,-19,59,-41,75,-49l28,-15l-96,-217c-123,-283,-125,-287,-125,-361c1,-153,129,-280,315,-312c85,-15,168,-2,253,40c87,43,227,190,276,291c39,78,68,197,68,274c0,109,-45,252,-108,344l-30,45l33,40c18,23,40,56,49,74c10,19,23,32,29,29c7,-3,118,-51,247,-108c234,-104,235,-104,315,-104c97,0,156,26,216,94c113,128,139,314,64,466c-58,119,-225,262,-368,314c-63,22,-88,26,-197,26c-144,0,-211,-18,-324,-86l-67,-40l-35,26c-19,15,-52,37,-74,49l-39,22l106,239c96,219,105,247,110,316c5,67,2,84,-19,130c-59,128,-200,209,-362,209c-41,-1,-92,-8,-122,-18ZM1921,3005c82,-58,112,-178,67,-264c-46,-90,-145,-137,-235,-113c-198,53,-220,323,-33,401c14,6,55,10,92,8c56,-2,74,-8,109,-32Z\" class=\"fan_blade\" id=\"fan_blade\"/>\n </g>\n </svg></g>\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"rotate_fan","targetId":"fan_blade","classValue":"fan_blade","attributeName":"rotate","fromValue":"360","toValue":"0","trigger":"time","duration":"3","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":840,"y":280,"wires":[[]]},{"id":"d06516d3.15555","type":"ui_group","z":"","name":"test","tab":"4e8fd009.82ce3","disp":true,"width":"12","collapse":false},{"id":"4e8fd009.82ce3","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

So this is your animation:

When you have a look at the html (that is generated for the dashboard), you will see that this is generated for your animation:

<animate id="rotate_fan" attributeType="XML" class="fan_blade" attributeName="rotate" from="360" to="0" dur="3s" repeatCount="indefinite" fill="remove" begin="1s"></animate>

Normally the attributeName should be the radius, or width, or height ... In this case you want to animate a transformation (e.g. rotate). But I think it your case we should generate something like this:

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite"/>

Not sure at the moment how we should implement that, without impact on existing flows... Perhaps @Steve-Mcl has a suggestion about this?

Unfortunately I will have to go this week for surgery, so won't be available for a few weeks. Will get back to you on this one afterwards! Bart

Thanks for looking at it, I hope you get well soon!

Hi @smcgann99,

I'm finally back :-) I have implemented on Github your request to animate transformations... Please install my "panzoom" branch (directly from Github since not available on NPM yet) into your Node-RED folder:

npm install bartbutenaers/node-red-contrib-ui-svg#panzoom

Would be nice if you could test it and give me some feedback...

Now you should be able to animate transformations. Indeed when the attribute name is "transform" an extra "animation type" dropdown will appear:

demo_config_screen

For example this little demo flow:

[{"id":"cfcb01a3.1bd47","type":"ui_svg_graphics","z":"66231c1b.516ef4","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":"time","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":"time","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":840,"y":280,"wires":[[]]},{"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}]

Will produce this result:

demo_transform_rotate

Looking good so far, thankyou very much. Can you confim if I can start AND stop via input message ?

It's working fine with trigger set to delay, but when I tried changing to input message and injected this message nothing happens.

msg : Object object payload: object command: "trigger_animation" selector: "#fan" Action: "start"

There are a few problems with your flow. I have added a new wiki page to provide you with a working example flow and explanation.

Thanks - working now using firefox with your syntax for message object. I have noted that it dosn't seem to work with Chrome, MS IE11 or MS Edge though, not sure if you tested this ?

To be clear - your example works in all but edge. My floor plan only works in firefox...

Morning @smcgann99 , I use the beginElement and endElement, but it indeed seems that IE11 and Edge don't support this. You can see that in this compatibility chart:

There are some polyfills (like this one) available, to add it to Edge. But those projects are abandonned for a long time already, so that is no solution...

So I'm afraid that is the end of this story.
When Microsoft doesn't support it, then there is less I can do about that ...

My floor plan only works in firefox...

To be honest, you don't give me much information to get started...

What doesn't work in the other browsers?
Do you have any errors in your browser console log?
Other information perhaps?

If this is not related to this animation issue, please close this issue and create a new one. Otherwise it is becoming a mess to follow up.

I will close this issue now - thanks for all your help.

Hy bartbuttenaers I have problem rotate svg,can't stay posisition. If i set 0,40,50 and 360,40,50 Have is solusition?

您的流程存在一些問題。我新增了一個新的wiki 頁面，為您提供工作範例流程和解釋。

Please tell me how to modify it according to the example. The fan still cannot turn on and off. flows.json

[ { "id": "a60c493e99d93768", "type": "ui_svg_graphics", "z": "cad3dda3ba68c7bb", "group": "23b16fbe.b0541", "order": 23, "width": "12", "height": "12", "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"256\" height=\"256\" viewBox=\"0 0 256 256\" xml:space=\"preserve\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:none;stroke:none\"/>\n\n \n \n <g style=\"stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;\" transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\">\n \n <path d=\"M 62.128 25.928 c -1.69 0 -3.269 0.466 -4.62 1.274 c -1.732 1.037 -3.611 1.786 -5.568 2.166 c -0.398 -0.493 -0.847 -0.942 -1.34 -1.34 c 0.381 -1.957 1.13 -3.836 2.166 -5.568 c 0.809 -1.351 1.274 -2.93 1.274 -4.62 c 0 -5.156 -4.316 -9.305 -9.533 -9.029 c -4.423 0.234 -8.1 3.756 -8.51 8.166 c -0.191 2.05 0.306 3.972 1.285 5.567 c 1.037 1.691 1.78 3.536 2.144 5.462 c -0.504 0.404 -0.963 0.859 -1.369 1.362 c -1.957 -0.381 -3.836 -1.13 -5.568 -2.166 c -1.351 -0.809 -2.93 -1.274 -4.62 -1.274 c -5.156 0 -9.305 4.316 -9.029 9.533 c 0.234 4.423 3.756 8.1 8.166 8.51 c 2.05 0.191 3.972 -0.306 5.567 -1.285 c 1.691 -1.037 3.536 -1.78 5.462 -2.144 c 0.411 0.513 0.877 0.979 1.39 1.39 c -0.364 1.925 -1.106 3.771 -2.144 5.462 c -0.979 1.595 -1.476 3.517 -1.285 5.567 c 0.41 4.41 4.087 7.932 8.51 8.166 c 5.217 0.276 9.533 -3.872 9.533 -9.029 c 0 -1.69 -0.466 -3.269 -1.274 -4.62 c -1.037 -1.732 -1.786 -3.611 -2.166 -5.568 c 0.502 -0.406 0.958 -0.865 1.362 -1.369 c 1.925 0.364 3.771 1.106 5.462 2.144 c 1.595 0.979 3.517 1.476 5.567 1.285 c 4.41 -0.41 7.932 -4.087 8.166 -8.51 C 71.433 30.244 67.285 25.928 62.128 25.928 z\" style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(51,204,204); fill-rule: nonzero; opacity: 1;\" transform=\" matrix(1 0 0 1 0 0) \" stroke-linecap=\"round\"/>\n <path d=\"M 45 69.939 c -19.282 0 -34.969 -15.687 -34.969 -34.969 C 10.03 15.687 25.718 0 45 0 s 34.97 15.687 34.97 34.969 C 79.97 54.252 64.282 69.939 45 69.939 z M 45 4.918 c -16.571 0 -30.051 13.481 -30.051 30.051 c 0 16.57 13.481 30.051 30.051 30.051 s 30.052 -13.481 30.052 -30.051 C 75.052 18.399 61.57 4.918 45 4.918 z\" style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(56,228,228); fill-rule: nonzero; opacity: 1;\" transform=\" matrix(1 0 0 1 0 0) \" stroke-linecap=\"round\"/>\n \n \n \n \n <circle cx=\"44.998\" cy=\"34.967999999999996\" r=\"5.268\" style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(249,249,249); fill-rule: nonzero; opacity: 1;\" transform=\" matrix(1 0 0 1 0 0) \"/>\n \n", "clickableShapes": [], "javascriptHandlers": [], "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, "showBrowserErrors": false, "showBrowserEvents": false, "enableJsDebugging": false, "sendMsgWhenLoaded": false, "noClickWhenDblClick": false, "outputField": "payload", "editorUrl": "http://drawsvg.org/drawsvg.html", "directory": "", "panning": "disabled", "zooming": "disabled", "panOnlyWhenZoomed": false, "doubleClickZoomEnabled": false, "mouseWheelZoomEnabled": false, "dblClickZoomPercentage": "150", "cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}", "name": "", "x": 500, "y": 420, "wires": [ [] ] }, { "id": "469f8aaaefd771d5", "type": "inject", "z": "cad3dda3ba68c7bb", "name": "Start animation", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{\"command\":\"trigger_animation\",\"selector\":\"[id^='rotate_gear']\",\"action\":\"start\"}", "payloadType": "json", "x": 280, "y": 420, "wires": [ [ "a60c493e99d93768" ] ] }, { "id": "cba36a31e4b7cd80", "type": "inject", "z": "cad3dda3ba68c7bb", "name": "Stop animation", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{\"command\":\"trigger_animation\",\"selector\":\"[id^='rotate_gear']\",\"action\":\"stop\"}", "payloadType": "json", "x": 280, "y": 460, "wires": [ [ "a60c493e99d93768" ] ] }, { "id": "23b16fbe.b0541", "type": "ui_group", "name": "test", "tab": "3d0faef1.feef72", "order": 1, "disp": true, "width": "12", "collapse": false }, { "id": "3d0faef1.feef72", "type": "ui_tab", "name": "test", "icon": "dashboard", "disabled": false, "hidden": false } ]

您的流程存在一些問題。我新增了一個新的wiki 頁面，為您提供工作範例流程和解釋。 flows.json Please tell me how to modify it according to the example. The fan still cannot turn on and off.

@kevining123,

You have created an animation that is used to animate a property of an SVG element with id "gear-A":

But none of the SVG (path) elements in your SVG drawing has such an id:

So the animation cannot know which element it needs to animate...

Bart

bartbutenaers / node-red-contrib-ui-svg

Problems with animations using rotate ? #48