Problem with rotate animation

I need help with animation rotate. It's working correctly only when I rotate image or text, but when I try rotate other elements it's going something wrong. Maybe for other elements coordinates set up in other way.

Ho @stdalexius,

Please share here a simplifoed version of your flow (i.e. an Inject node and an SVG node), so I can easily reproduce your issue.

And also explain what it is going wrong, because at the moment I don't know exactly what your problem is (rotate around the center of an object, or somethig else perhaps...).

Bart

[{"id":"b147243876ef3437","type":"ui_button","z":"de44545b1312e41d","name":"","group":"3734b74f2e40185a","order":1,"width":0,"height":0,"passthru":false,"label":"button2","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='2nd_animation']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":1240,"y":500,"wires":[["f5b48ce599820b37"]]},{"id":"7f87e52c30905962","type":"ui_button","z":"de44545b1312e41d","name":"","group":"3734b74f2e40185a","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='rotate_work']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":1250,"y":460,"wires":[["f5b48ce599820b37"]]},{"id":"f5b48ce599820b37","type":"ui_svg_graphics","z":"de44545b1312e41d","group":"3734b74f2e40185a","order":0,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"600\" viewBox=\"0 0 600 600\" width=\"600\" preserveAspectRatio=\"xMidYMid meet\">\n <defs id=\"svgEditorDefs\">\n <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f7e4\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 448 512\">\n <path d=\"M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z\"/>\n </symbol>\n </defs>\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"600\" height=\"600\" style=\"fill:none;stroke:none\"/>\n\n <image x=\"161.37\" y=\"153.46\" width=\"293.09\" height=\"293.09\" id=\"work\" preserveAspectRatio=\"xMidYMid meet\" xlink:href=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+Cgo8c3ZnCiAgIGZpbGw9IiMwMDAwMDAiCiAgIGhlaWdodD0iODAwcHgiCiAgIHdpZHRoPSI4MDBweCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB2aWV3Qm94PSIwIDAgNDkwIDQ5MCIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZmFuLXN2Z3JlcG8gcm90YXRlLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4zICgwZTE1MGVkNmM0LCAyMDIzLTA3LTIxKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcwogICBpZD0iZGVmczQiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICBpZD0ibmFtZWR2aWV3NCIKICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgYm9yZGVyb3BhY2l0eT0iMC4yNSIKICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgc2hvd2dyaWQ9ImZhbHNlIgogICBpbmtzY2FwZTp6b29tPSIxLjAyNjI1IgogICBpbmtzY2FwZTpjeD0iMzk5LjUxMjc5IgogICBpbmtzY2FwZTpjeT0iNDAwIgogICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiCiAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTciCiAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnNCIgLz4mIzEwOzxnCiAgIGlkPSJnNCIKICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDgwNzg0LDAsMCwxLC0wLjQ4NzEyODI5LDApIj4mIzEwOwk8ZwogICBpZD0iZzMiCiAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk4MTA4NywwLDAsMS4zMjQ3NTIyLC03NC44MTI3ODUsLTc4LjY2OTAzOCkiPiYjMTA7CQk8ZwogICBpZD0iZzIiPiYjMTA7CQkJJiMxMDsJCQk8cGF0aAogICBkPSJNIDI0NSw2MC4zIEMgMTQzLjEsNjAuMyA2MC4zLDE0My4xIDYwLjMsMjQ1IDYwLjMsMzQ2LjkgMTQzLjEsNDI5LjcgMjQ1LDQyOS43IDM0Ni45LDQyOS43IDQyOS43LDM0Ni45IDQyOS43LDI0NSA0MjkuNywxNDMuMSAzNDYuOSw2MC4zIDI0NSw2MC4zIFogbSAwLDIzLjMgYyAzNS44LDAgNjQuOSwxNi43IDY0LjksMzcuMyAwLDEyLjEgLTYuMiw0Ni43IC0xOC43LDcyLjcgQyAyNzUuOCwxODAgMjQwLjgsMTY2LjkgMjA4LjgsMTg2LjIgMTkyLjEsMTYxLjMgMTgwLjQsMTMyLjEgMTgwLjQsMTIwLjkgMTgwLjEsMTAwLjMgMjA5LjIsODMuNiAyNDUsODMuNiBaIE0gMjk0LjQsMjQ1IGMgMCwyNy4yIC0yMi4yLDQ5LjQgLTQ5LjQsNDkuNCAtMjcuMiwwIC00OS40LC0yMi4yIC00OS40LC00OS40IDAsLTI3LjIgMjIuMiwtNDkuNCA0OS40LC00OS40IDI3LjIsMCA0OS40LDIyLjIgNDkuNCw0OS40IHogbSAtMjEwLjgsMCBjIDAsLTM1LjggMTYuNywtNjQuOSAzNy4zLC02NC45IDEyLjEsMCA0Ni43LDYuMiA3Mi43LDE4LjcgLTI5LjQsMjkuMiAtMTQsNzEuOSAtNy40LDgyLjQgLTI0LjksMTYuNyAtNTQuMSwyOC40IC02NS4zLDI4LjQgQyAxMDAuMywzMDkuOSA4My42LDI4MC44IDgzLjYsMjQ1IFogTSAyNDUsNDA2LjQgYyAtMzUuOCwwIC02NC45LC0xNi43IC02NC45LC0zNy4zIDAsLTEyLjEgNi4yLC00Ni43IDE4LjcsLTcyLjcgMTUuOSwxMy42IDUyLjIsMjYuNSA4Mi40LDcuNCAxNi43LDI0LjkgMjguNCw1NC4xIDI4LjQsNjUuMyAwLjMsMjAuNiAtMjguOCwzNy4zIC02NC42LDM3LjMgeiBtIDEyNC40LC05Ni41IGMgLTEyLjEsMCAtNDYuNywtNi4yIC03Mi43LC0xOC43IDEwLjksLTEyLjQgMjguOSwtNDYuNSA3LjQsLTgyLjQgMjQuOSwtMTYuNyA1NC4xLC0yOC40IDY1LjMsLTI4LjQgMjAuNiwwIDM3LjMsMjkuMiAzNy4zLDY0LjkgLTAuMywzNS41IC0xNyw2NC42IC0zNy4zLDY0LjYgeiIKICAgaWQ9InBhdGgxIgogICBpbmtzY2FwZTpsYWJlbD0id29yazIiIC8+JiMxMDsJCTwvZz4mIzEwOwk8L2c+JiMxMDs8L2c+JiMxMDs8L3N2Zz4K\"/>\n <text style=\"fill:red;font-family:Arial;font-size:20px\" x=\"286.921\" y=\"120.981\" id=\"temperature\">1111</text>\n \n\n \n \n \n <path d=\"M1395.253124,9154.892034c-1.76363,6.53649,6.35219,11.14746,11.087651,6.30851c25.705276,-26.26559,72.222333,-56.21501,144.22652,-41.95362c120.07382,23.78308,183.27404,40.51368,183.27404,40.51368c0,0,-62.22198,30.84206,-110.96913,86.99004c-46.91564,54.03901,-112.6114,92.7796,-179.94695,69.99115c-6.319687,-2.13847,-11.480062,5.36553,-7.192215,10.47646c33.276049,39.67399,90.925935,79.51837,183.985605,64.19625c28.51852,-4.32299,67.05275,-16.45533,112.98771,-43.52109c58.15231,-34.59236,81.75644,-66.15461,91.04423,-83.41592c2.77869,-5.16341,-2.08872,-11.08955,-7.71231,-9.4306c-66.7816,19.70067,-89.80675,-1.84798,-54.38747,-25.22371c14.1472,-9.33595,40.13708,-18.84232,72.72968,-26.30478c54.2609,-12.42366,106.51305,-40.95531,143.95596,-86.05465c9.73708,-11.72801,18.34867,-24.81408,24.98008,-39.08407c2.40152,-5.1663,-2.47773,-10.74094,-7.92446,-9.07118c-36.17395,-2.629572,-142.14781,19.093278,-289.26888,-44.557872c-136.02834,-57.109897,-218.311446,-4.07159,-239.972537,13.02306c-41.506738,32.70469,-61.805642,69.71467,-70.897524,103.40158Z\" style=\"display:inline;fill:#ff0000\" transform=\"matrix(0.05801723,0,0,0.04604431,0.56715887,-3.237024)\" id=\"flame3\"/>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"rotate_work","targetId":"work","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,308,300","toValue":"360,308,300","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"1000000","end":"freeze","delay":"1","delayUnit":"s","custom":""},{"id":"2nd_animation","targetId":"flame3","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,92,420","toValue":"360,92,420","trigger":"msg","duration":"2","durationUnit":"s","repeatCount":"2","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[{"selector":"#temperature","bindSource":"msg.payload","bindType":"text","attribute":""},{"selector":"#flame","bindSource":"payload.color","bindType":"attr","attribute":"fill"},{"selector":"#flame","bindSource":"msg.payload","bindType":"attr","attribute":"hidden"},{"selector":"#flame2","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//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":1660,"y":600,"wires":[[]]},{"id":"3734b74f2e40185a","type":"ui_group","name":"Group 1","tab":"dbd90ca2f8e7a269","order":1,"disp":true,"width":6},{"id":"dbd90ca2f8e7a269","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

Also I can give you another example: [{"id":"afd7d65ce6bfcda2","type":"ui_button","z":"de44545b1312e41d","name":"","group":"3734b74f2e40185a","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='1_an']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":970,"y":600,"wires":[["772438880393926f"]]},{"id":"772438880393926f","type":"ui_svg_graphics","z":"de44545b1312e41d","group":"3734b74f2e40185a","order":0,"width":0,"height":0,"svgString":"<svg xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" id=\"svg2\" version=\"1.1\" inkscape:version=\"1.3 (0e150ed6c4, 2023-07-21)\" width=\"1200\" height=\"600\" viewBox=\"0 0 1200 600\" sodipodi:docname=\"flame-svgrepo-proverka.svg\" xml:space=\"preserve\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1200\" height=\"600\" style=\"fill:none;stroke:none\"/>\n <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" id=\"namedview4\" showgrid=\"false\" borderlayer=\"true\" inkscape:showpageshadow=\"false\" inkscape:zoom=\"1.3788818\" inkscape:cx=\"568.93929\" inkscape:cy=\"192.54733\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg2\" showguides=\"false\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\">\n <inkscape:grid type=\"xygrid\" id=\"grid3757\" empspacing=\"100\" visible=\"false\" enabled=\"true\" snapvisiblegridlinesonly=\"false\" originx=\"0\" originy=\"0\" spacingy=\"1\" spacingx=\"1\" units=\"px\"/>\n </sodipodi:namedview>\n <metadata id=\"metadata8\">\n <rdf:RDF>\n <cc:Work rdf:about=\"\">\n <dc:format>image/svg+xml</dc:format>\n <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs id=\"defs6\">\n <linearGradient id=\"linearGradient13\" inkscape:collect=\"always\">\n <stop style=\"stop-color:#b0b0b0;stop-opacity:1;\" offset=\"0\" id=\"stop13\"/>\n <stop style=\"stop-color:#b0b0b0;stop-opacity:0;\" offset=\"1\" id=\"stop14\"/>\n </linearGradient>\n <rect x=\"818.44757\" y=\"111.79296\" width=\"47.178682\" height=\"25.640588\" id=\"rect13\"/>\n <linearGradient id=\"swatch12\" inkscape:swatch=\"solid\">\n <stop style=\"stop-color:#07070a;stop-opacity:1;\" offset=\"0\" id=\"stop12\"/>\n </linearGradient>\n <inkscape:perspective sodipodi:type=\"inkscape:persp3d\" inkscape:vp_x=\"0 : 300 : 1\" inkscape:vp_y=\"0 : 1000 : 0\" inkscape:vp_z=\"1200 : 300 : 1\" inkscape:persp3d-origin=\"600 : 200 : 1\" id=\"perspective6\"/>\n <marker style=\"overflow:visible\" refX=\"0\" refY=\"0\" orient=\"auto\" inkscape:stockid=\"Colored diamond\" id=\"ColoredDiamond\" markerWidth=\"1\" markerHeight=\"1\" viewBox=\"0 0 1 1\" inkscape:isstock=\"true\" inkscape:collect=\"always\" preserveAspectRatio=\"xMidYMid\">\n <path transform=\"scale(0.45)\" style=\"fill:context-fill;fill-rule:evenodd;stroke:context-stroke;stroke-width:2\" d=\"M 0,-7.0710768 -7.0710894,0 0,7.0710589 7.0710462,0 Z\" id=\"path22\"/>\n </marker>\n <linearGradient id=\"swatch4\" inkscape:swatch=\"solid\">\n <stop style=\"stop-color:#03030e;stop-opacity:1;\" offset=\"0\" id=\"stop4\"/>\n </linearGradient>\n <linearGradient inkscape:collect=\"always\" xlink:href=\"#swatch12\" id=\"linearGradient12\" x1=\"436.78378\" y1=\"249.24775\" x2=\"459.99101\" y2=\"249.24775\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"matrix(1.0002027,0,0,0.99041234,395.28697,1.5738251)\"/>\n <linearGradient inkscape:collect=\"always\" xlink:href=\"#linearGradient13\" id=\"linearGradient14\" x1=\"818.3525\" y1=\"119.37472\" x2=\"853.43461\" y2=\"119.37472\" gradientUnits=\"userSpaceOnUse\"/>\n <rect x=\"818.44757\" y=\"111.79296\" width=\"47.17868\" height=\"25.640589\" id=\"rect13-5\"/>\n </defs>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:0.771881\" id=\"rect1\" width=\"514.86304\" height=\"239.99591\" x=\"379.48068\" y=\"332.302\"/>\n <ellipse style=\"display:inline;opacity:0.634;mix-blend-mode:normal;fill:#b0b0b0;fill-opacity:1;fill-rule:evenodd;stroke-width:1.20264\" id=\"boiler_topka\" cx=\"637.93781\" cy=\"451.27435\" rx=\"254.35464\" ry=\"118.97232\" inkscape:label=\"boiler_topka\"/>\n <g style=\"fill:#000000\" id=\"g2\" transform=\"matrix(3.4554647,0,0,2.5896595,424.87909,423.8962)\">\n <g id=\"g1\" transform=\"matrix(0.05801723,0,0,0.04604431,0.56715887,-3.237024)\">\n\n <path d=\"m1.8377893,225.27967c-1.76363003,6.53649,6.3521897,11.14746,11.0876507,6.30851c25.705276,-26.26559,72.222333,-56.21501,144.22652,-41.95362c120.07382,23.78308,183.27404,40.51368,183.27404,40.51368c0,0,-62.22198,30.84206,-110.96913,86.99004c-46.91564,54.03901,-112.6114,92.7796,-179.94695,69.99115c-6.319687,-2.13847,-11.480062,5.36553,-7.192215,10.47646c33.276049,39.67399,90.925935,79.51837,183.985605,64.19625c28.51852,-4.32299,67.05275,-16.45533,112.98771,-43.52109c58.15231,-34.59236,81.75644,-66.15461,91.04423,-83.41592c2.77869,-5.16341,-2.08872,-11.08955,-7.71231,-9.4306c-66.7816,19.70067,-89.80675,-1.84798,-54.38747,-25.22371c14.1472,-9.33595,40.13708,-18.84232,72.72968,-26.30478c54.2609,-12.42366,106.51305,-40.95531,143.95596,-86.05465c9.73708,-11.72801,18.34867,-24.81408,24.98008,-39.08407c2.40152,-5.1663,-2.47773,-10.74094,-7.92446,-9.07118C565.80278,150.78333,459.82892,172.50618,312.70785,108.85503C176.67951,51.745133,94.396404,104.78344,72.735313,121.87809C31.228575,154.58278,10.929671,191.59276,1.8377893,225.27967Z\" id=\"flame\" inkscape:label=\"burn1\" style=\"display:inline;fill:#ff0000\"/>\n\n </g>\n </g>\n <g id=\"g5\">\n <rect style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"burn5\" width=\"109.702000\" height=\"41.495500\" x=\"304.652000\" y=\"432.120000\"/>\n <ellipse style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"path3\" cx=\"309.85150146484375\" cy=\"473.0688781738281\" rx=\"41.138161\" ry=\"46.409466\" inkscape:label=\"path3\"/>\n </g>\n <g style=\"fill:#000000\" id=\"g6\" transform=\"matrix(0.31399429,0,0,0.2721321,151.78545,211.27161)\">\n <g id=\"g4\" style=\"fill:#ff0000\" transform=\"matrix(0.57170312,0,0,0.60321157,363.03914,818.08901)\">\n <g id=\"g3\" style=\"fill:#ff0000\">\n <g id=\"g2-5\" style=\"fill:#ff0000\">\n\n <path d=\"M245,60.3C143.1,60.3,60.3,143.1,60.3,245C60.3,346.9,143.1,429.7,245,429.7C346.9,429.7,429.7,346.9,429.7,245C429.7,143.1,346.9,60.3,245,60.3Zm0,23.3c35.8,0,64.9,16.7,64.9,37.3c0,12.1,-6.2,46.7,-18.7,72.7C275.8,180,240.8,166.9,208.8,186.2C192.1,161.3,180.4,132.1,180.4,120.9C180.1,100.3,209.2,83.6,245,83.6ZM294.4,245c0,27.2,-22.2,49.4,-49.4,49.4c-27.2,0,-49.4,-22.2,-49.4,-49.4c0,-27.2,22.2,-49.4,49.4,-49.4c27.2,0,49.4,22.2,49.4,49.4Zm-210.8,0c0,-35.8,16.7,-64.9,37.3,-64.9c12.1,0,46.7,6.2,72.7,18.7c-29.4,29.2,-14,71.9,-7.4,82.4c-24.9,16.7,-54.1,28.4,-65.3,28.4C100.3,309.9,83.6,280.8,83.6,245ZM245,406.4c-35.8,0,-64.9,-16.7,-64.9,-37.3c0,-12.1,6.2,-46.7,18.7,-72.7c15.9,13.6,52.2,26.5,82.4,7.4c16.7,24.9,28.4,54.1,28.4,65.3c0.3,20.6,-28.8,37.3,-64.6,37.3Zm124.4,-96.5c-12.1,0,-46.7,-6.2,-72.7,-18.7c10.9,-12.4,28.9,-46.5,7.4,-82.4c24.9,-16.7,54.1,-28.4,65.3,-28.4c20.6,0,37.3,29.2,37.3,64.9c-0.3,35.5,-17,64.6,-37.3,64.6Z\" id=\"fan\" style=\"fill:#ff0000\" inkscape:label=\"fan\"/>\n \n\n </g>\n </g>\n</g>\n </g>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke:#05050c;stroke-opacity:1\" id=\"rect12\" width=\"23.207232\" height=\"169.70271\" x=\"434.86566\" y=\"162.45049\" inkscape:label=\"pipe_obratka\"/>\n <rect style=\"opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient12);stroke-width:0.995295\" id=\"rect12-1\" width=\"23.211937\" height=\"168.07565\" x=\"832.1593\" y=\"164.39404\" inkscape:label=\"pipe_podacha\"/>\n <text xml:space=\"preserve\" id=\"text12\" style=\"white-space:pre;shape-inside:url(#rect13);display:inline;opacity:1;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_obratka\" transform=\"matrix(2.2200088,0,0,2.5378274,-1009.5413,-167.68056)\">\n <tspan x=\"818.44727\" y=\"122.74093\" id=\"tspan4\">\n <tspan style=\"fill:url(#linearGradient14)\" id=\"value_podacha\">00,00</tspan>\n </tspan>\n </text><text xml:space=\"preserve\" id=\"text12-1\" style=\"white-space:pre;shape-inside:url(#rect13-5);display:inline;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_podacha\" transform=\"matrix(2.2200088,0,0,2.5378274,-1407.0403,-160.87847)\">\n <tspan x=\"818.44727\" y=\"122.74093\" id=\"value_obratka\">\n <tspan style=\"fill:url(#linearGradient14)\" id=\"tspan5\">00,00</tspan>\n </tspan>\n </text>\n <path fill=\"#000000\" d=\"m642.29673,300.10265q9.53428,0,17.82496,-4.42368q7.95905,-4.27115,12.60183,-11.5931q4.80859,-7.62704,4.80859,-16.39814q0,-8.77109,-4.80859,-16.39813q-4.64278,-7.32196,-12.60183,-11.59309q-8.29068,-4.42368,-17.82496,-4.42368q-9.53428,0,-17.82496,4.42368q-7.95905,4.27113,-12.60182,11.59309q-4.8086,7.62704,-4.8086,16.39813q0,8.7711,4.8086,16.39814q4.64277,7.32195,12.60182,11.5931q8.29068,4.42368,17.82496,4.42368Zm0,-6.25417q-7.71033,0,-14.34287,-3.50844q-6.46673,-3.50844,-10.28044,-9.45753q-3.81371,-6.10163,-3.81371,-13.19477q0,-7.09314,3.81371,-13.19478q3.81371,-5.94909,10.28044,-9.45753q6.63254,-3.50844,14.34287,-3.50844q2.98465,0,5.96929,0.53389l-32.25074,25.62685l32.16783,25.62686q-2.90173,0.53389,-5.88638,0.53389Zm13.84543,-3.27963m-29.92934,-23.03366m29.68062,-22.88111q6.79836,3.43217,10.77788,9.45752q4.06244,6.25418,4.06244,13.538q0,7.28383,-3.97953,13.46173q-3.97952,6.02535,-10.61207,9.45752Z\" id=\"pump\" style=\"display:inline;opacity:1;fill:#ff0000;stroke-width:0.0795196\" inkscape:label=\"pump\"/>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.02634\" id=\"rect17-1\" width=\"155.0338\" height=\"10.256235\" x=\"676.68903\" y=\"264.51282\" inkscape:label=\"pipe_pump_podacha\"/>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.01224\" id=\"rect17\" width=\"150.8031\" height=\"10.256235\" x=\"456.4025\" y=\"263.07242\" inkscape:label=\"pipe_pump_podacha\"/>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"1_an","targetId":"fan","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,310,473","toValue":"360,310,473","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"86400","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[{"selector":"#temperature","bindSource":"msg.payload","bindType":"text","attribute":""},{"selector":"#flame","bindSource":"payload.color","bindType":"attr","attribute":"fill"},{"selector":"#flame","bindSource":"msg.payload","bindType":"attr","attribute":"hidden"},{"selector":"#flame2","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//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":1180,"y":600,"wires":[[]]},{"id":"3734b74f2e40185a","type":"ui_group","name":"Group 1","tab":"dbd90ca2f8e7a269","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"dbd90ca2f8e7a269","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

@stdalexius, Thanks for providing a simplified flow! That makes it easier to reproduce your issue.

Can you also answer my second question? Because I see the fan starting to rotate (correctly), so still not really an idea what you are trying to achieve and what the problem is...

Thanks for trying help me! I want fan (push "button") rotating like pump (push "button2"). Pump rotates around the center, but fan rotaes rotates from the edge of the picture even though the coordinates are in the center of the fan [{"id":"cfd7b88d9c01b601","type":"ui_svg_graphics","z":"de44545b1312e41d","group":"3734b74f2e40185a","order":1,"width":0,"height":0,"svgString":"<svg xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" id=\"svg2\" version=\"1.1\" inkscape:version=\"1.3 (0e150ed6c4, 2023-07-21)\" width=\"1200\" height=\"600\" viewBox=\"0 0 1200 600\" sodipodi:docname=\"flame-svgrepo-proverka.svg\" xml:space=\"preserve\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1200\" height=\"600\" style=\"fill:none;stroke:none\"/>\n <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" id=\"namedview4\" showgrid=\"false\" borderlayer=\"true\" inkscape:showpageshadow=\"false\" inkscape:zoom=\"1.3788818\" inkscape:cx=\"568.93929\" inkscape:cy=\"192.54733\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg2\" showguides=\"false\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\">\n <inkscape:grid type=\"xygrid\" id=\"grid3757\" empspacing=\"100\" visible=\"false\" enabled=\"true\" snapvisiblegridlinesonly=\"false\" originx=\"0\" originy=\"0\" spacingy=\"1\" spacingx=\"1\" units=\"px\"/>\n </sodipodi:namedview>\n <metadata id=\"metadata8\">\n <rdf:RDF>\n <cc:Work rdf:about=\"\">\n <dc:format>image/svg+xml</dc:format>\n <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs id=\"defs6\">\n <linearGradient id=\"linearGradient13\" inkscape:collect=\"always\">\n <stop style=\"stop-color:#b0b0b0;stop-opacity:1;\" offset=\"0\" id=\"stop13\"/>\n <stop style=\"stop-color:#b0b0b0;stop-opacity:0;\" offset=\"1\" id=\"stop14\"/>\n </linearGradient>\n <rect x=\"818.44757\" y=\"111.79296\" width=\"47.178682\" height=\"25.640588\" id=\"rect13\"/>\n <linearGradient id=\"swatch12\" inkscape:swatch=\"solid\">\n <stop style=\"stop-color:#07070a;stop-opacity:1;\" offset=\"0\" id=\"stop12\"/>\n </linearGradient>\n <inkscape:perspective sodipodi:type=\"inkscape:persp3d\" inkscape:vp_x=\"0 : 300 : 1\" inkscape:vp_y=\"0 : 1000 : 0\" inkscape:vp_z=\"1200 : 300 : 1\" inkscape:persp3d-origin=\"600 : 200 : 1\" id=\"perspective6\"/>\n <marker style=\"overflow:visible\" refX=\"0\" refY=\"0\" orient=\"auto\" inkscape:stockid=\"Colored diamond\" id=\"ColoredDiamond\" markerWidth=\"1\" markerHeight=\"1\" viewBox=\"0 0 1 1\" inkscape:isstock=\"true\" inkscape:collect=\"always\" preserveAspectRatio=\"xMidYMid\">\n <path transform=\"scale(0.45)\" style=\"fill:context-fill;fill-rule:evenodd;stroke:context-stroke;stroke-width:2\" d=\"M 0,-7.0710768 -7.0710894,0 0,7.0710589 7.0710462,0 Z\" id=\"path22\"/>\n </marker>\n <linearGradient id=\"swatch4\" inkscape:swatch=\"solid\">\n <stop style=\"stop-color:#03030e;stop-opacity:1;\" offset=\"0\" id=\"stop4\"/>\n </linearGradient>\n <linearGradient inkscape:collect=\"always\" xlink:href=\"#swatch12\" id=\"linearGradient12\" x1=\"436.78378\" y1=\"249.24775\" x2=\"459.99101\" y2=\"249.24775\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"matrix(1.0002027,0,0,0.99041234,395.28697,1.5738251)\"/>\n <linearGradient inkscape:collect=\"always\" xlink:href=\"#linearGradient13\" id=\"linearGradient14\" x1=\"818.3525\" y1=\"119.37472\" x2=\"853.43461\" y2=\"119.37472\" gradientUnits=\"userSpaceOnUse\"/>\n <rect x=\"818.44757\" y=\"111.79296\" width=\"47.17868\" height=\"25.640589\" id=\"rect13-5\"/>\n </defs>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:0.771881\" id=\"rect1\" width=\"514.86304\" height=\"239.99591\" x=\"379.48068\" y=\"332.302\"/>\n <ellipse style=\"display:inline;opacity:0.634;mix-blend-mode:normal;fill:#b0b0b0;fill-opacity:1;fill-rule:evenodd;stroke-width:1.20264\" id=\"boiler_topka\" cx=\"637.93781\" cy=\"451.27435\" rx=\"254.35464\" ry=\"118.97232\" inkscape:label=\"boiler_topka\"/>\n <g style=\"fill:#000000\" id=\"g2\" transform=\"matrix(3.4554647,0,0,2.5896595,424.87909,423.8962)\">\n <g id=\"g1\" transform=\"matrix(0.05801723,0,0,0.04604431,0.56715887,-3.237024)\">\n\n <path d=\"m1.8377893,225.27967c-1.76363003,6.53649,6.3521897,11.14746,11.0876507,6.30851c25.705276,-26.26559,72.222333,-56.21501,144.22652,-41.95362c120.07382,23.78308,183.27404,40.51368,183.27404,40.51368c0,0,-62.22198,30.84206,-110.96913,86.99004c-46.91564,54.03901,-112.6114,92.7796,-179.94695,69.99115c-6.319687,-2.13847,-11.480062,5.36553,-7.192215,10.47646c33.276049,39.67399,90.925935,79.51837,183.985605,64.19625c28.51852,-4.32299,67.05275,-16.45533,112.98771,-43.52109c58.15231,-34.59236,81.75644,-66.15461,91.04423,-83.41592c2.77869,-5.16341,-2.08872,-11.08955,-7.71231,-9.4306c-66.7816,19.70067,-89.80675,-1.84798,-54.38747,-25.22371c14.1472,-9.33595,40.13708,-18.84232,72.72968,-26.30478c54.2609,-12.42366,106.51305,-40.95531,143.95596,-86.05465c9.73708,-11.72801,18.34867,-24.81408,24.98008,-39.08407c2.40152,-5.1663,-2.47773,-10.74094,-7.92446,-9.07118C565.80278,150.78333,459.82892,172.50618,312.70785,108.85503C176.67951,51.745133,94.396404,104.78344,72.735313,121.87809C31.228575,154.58278,10.929671,191.59276,1.8377893,225.27967Z\" id=\"flame\" inkscape:label=\"burn1\" style=\"display:inline;fill:#ff0000\"/>\n\n </g>\n </g>\n <g id=\"g5\">\n <rect style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"burn5\" width=\"109.702000\" height=\"41.495500\" x=\"304.652000\" y=\"432.120000\"/>\n <ellipse style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"path3\" cx=\"309.85150146484375\" cy=\"473.0688781738281\" rx=\"41.138161\" ry=\"46.409466\" inkscape:label=\"path3\"/>\n </g>\n <g style=\"fill:#000000\" id=\"g6\" transform=\"matrix(0.31399429,0,0,0.2721321,151.78545,211.27161)\">\n <g id=\"g4\" style=\"fill:#ff0000\" transform=\"matrix(0.57170312,0,0,0.60321157,363.03914,818.08901)\">\n <g id=\"g3\" style=\"fill:#ff0000\">\n <g id=\"g2-5\" style=\"fill:#ff0000\">\n\n <path d=\"M245,60.3C143.1,60.3,60.3,143.1,60.3,245C60.3,346.9,143.1,429.7,245,429.7C346.9,429.7,429.7,346.9,429.7,245C429.7,143.1,346.9,60.3,245,60.3Zm0,23.3c35.8,0,64.9,16.7,64.9,37.3c0,12.1,-6.2,46.7,-18.7,72.7C275.8,180,240.8,166.9,208.8,186.2C192.1,161.3,180.4,132.1,180.4,120.9C180.1,100.3,209.2,83.6,245,83.6ZM294.4,245c0,27.2,-22.2,49.4,-49.4,49.4c-27.2,0,-49.4,-22.2,-49.4,-49.4c0,-27.2,22.2,-49.4,49.4,-49.4c27.2,0,49.4,22.2,49.4,49.4Zm-210.8,0c0,-35.8,16.7,-64.9,37.3,-64.9c12.1,0,46.7,6.2,72.7,18.7c-29.4,29.2,-14,71.9,-7.4,82.4c-24.9,16.7,-54.1,28.4,-65.3,28.4C100.3,309.9,83.6,280.8,83.6,245ZM245,406.4c-35.8,0,-64.9,-16.7,-64.9,-37.3c0,-12.1,6.2,-46.7,18.7,-72.7c15.9,13.6,52.2,26.5,82.4,7.4c16.7,24.9,28.4,54.1,28.4,65.3c0.3,20.6,-28.8,37.3,-64.6,37.3Zm124.4,-96.5c-12.1,0,-46.7,-6.2,-72.7,-18.7c10.9,-12.4,28.9,-46.5,7.4,-82.4c24.9,-16.7,54.1,-28.4,65.3,-28.4c20.6,0,37.3,29.2,37.3,64.9c-0.3,35.5,-17,64.6,-37.3,64.6Z\" id=\"fan\" style=\"fill:#ff0000\" inkscape:label=\"fan\"/>\n \n\n </g>\n </g>\n</g>\n </g>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke:#05050c;stroke-opacity:1\" id=\"rect12\" width=\"23.207232\" height=\"169.70271\" x=\"434.86566\" y=\"162.45049\" inkscape:label=\"pipe_obratka\"/>\n <rect style=\"opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient12);stroke-width:0.995295\" id=\"rect12-1\" width=\"23.211937\" height=\"168.07565\" x=\"832.1593\" y=\"164.39404\" inkscape:label=\"pipe_podacha\"/>\n <text xml:space=\"preserve\" id=\"text12\" style=\"white-space:pre;shape-inside:url(#rect13);display:inline;opacity:1;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_obratka\" transform=\"matrix(2.2200088,0,0,2.5378274,-1009.5413,-167.68056)\">\n <tspan x=\"818.44727\" y=\"122.74093\" id=\"tspan4\">\n <tspan style=\"fill:url(#linearGradient14)\" id=\"value_podacha\">00,00</tspan>\n </tspan>\n </text><text xml:space=\"preserve\" id=\"text12-1\" style=\"white-space:pre;shape-inside:url(#rect13-5);display:inline;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_podacha\" transform=\"matrix(2.2200088,0,0,2.5378274,-1407.0403,-160.87847)\">\n <tspan x=\"818.44727\" y=\"122.74093\" id=\"value_obratka\">\n <tspan style=\"fill:url(#linearGradient14)\" id=\"tspan5\">00,00</tspan>\n </tspan>\n </text>\n <path fill=\"#000000\" d=\"m642.29673,300.10265q9.53428,0,17.82496,-4.42368q7.95905,-4.27115,12.60183,-11.5931q4.80859,-7.62704,4.80859,-16.39814q0,-8.77109,-4.80859,-16.39813q-4.64278,-7.32196,-12.60183,-11.59309q-8.29068,-4.42368,-17.82496,-4.42368q-9.53428,0,-17.82496,4.42368q-7.95905,4.27113,-12.60182,11.59309q-4.8086,7.62704,-4.8086,16.39813q0,8.7711,4.8086,16.39814q4.64277,7.32195,12.60182,11.5931q8.29068,4.42368,17.82496,4.42368Zm0,-6.25417q-7.71033,0,-14.34287,-3.50844q-6.46673,-3.50844,-10.28044,-9.45753q-3.81371,-6.10163,-3.81371,-13.19477q0,-7.09314,3.81371,-13.19478q3.81371,-5.94909,10.28044,-9.45753q6.63254,-3.50844,14.34287,-3.50844q2.98465,0,5.96929,0.53389l-32.25074,25.62685l32.16783,25.62686q-2.90173,0.53389,-5.88638,0.53389Zm13.84543,-3.27963m-29.92934,-23.03366m29.68062,-22.88111q6.79836,3.43217,10.77788,9.45752q4.06244,6.25418,4.06244,13.538q0,7.28383,-3.97953,13.46173q-3.97952,6.02535,-10.61207,9.45752Z\" id=\"pump\" style=\"display:inline;opacity:1;fill:#ff0000;stroke-width:0.0795196\" inkscape:label=\"pump\"/>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.02634\" id=\"rect17-1\" width=\"155.0338\" height=\"10.256235\" x=\"676.68903\" y=\"264.51282\" inkscape:label=\"pipe_pump_podacha\"/>\n <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.01224\" id=\"rect17\" width=\"150.8031\" height=\"10.256235\" x=\"456.4025\" y=\"263.07242\" inkscape:label=\"pipe_pump_podacha\"/>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"1_an","targetId":"fan","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,310,473","toValue":"360,310,473","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"86400","end":"restore","delay":"1","delayUnit":"s","custom":""},{"id":"2_an","targetId":"pump","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,641,267","toValue":"360,641,267","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"86400","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[{"selector":"#temperature","bindSource":"msg.payload","bindType":"text","attribute":""},{"selector":"#flame","bindSource":"payload.color","bindType":"attr","attribute":"fill"},{"selector":"#flame","bindSource":"msg.payload","bindType":"attr","attribute":"hidden"},{"selector":"#flame2","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//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":940,"y":240,"wires":[[]]},{"id":"97abcb2c2c43b9d1","type":"ui_button","z":"de44545b1312e41d","name":"","group":"3734b74f2e40185a","order":3,"width":0,"height":0,"passthru":false,"label":"button2","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='2_an']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":480,"y":180,"wires":[["cfd7b88d9c01b601"]]},{"id":"eada6c361bf17a2c","type":"ui_button","z":"de44545b1312e41d","name":"","group":"3734b74f2e40185a","order":2,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='1_an']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":530,"y":100,"wires":[["cfd7b88d9c01b601"]]},{"id":"3734b74f2e40185a","type":"ui_group","name":"Group 1","tab":"dbd90ca2f8e7a269","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"dbd90ca2f8e7a269","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

Thanks in advance!

Hi @stdalexius,

Sorry for the delay! Very busy life unfortunately...

I really understand your confusion. At first sight I also thought your animation were correctly. I figured out a solution, and I have explained it in depth below so hopefully you can understand what is happening in your case...

Pump is rotating around its center

When you activate the tooltip with coordinates in the node settings (like you already did), you can navigate with your mouse near the center point of your pump. That way the center point of your pump is (approximately) displayed:

And the transform origin of your rotation animation has the same coordinates as the pump's center point:

So you get what you expect, i.e. the animation lets the pump rotate around its center point:

pump_rotate

The reason it works fine, is because the transformation origin corresponds to the center point of the bounding box of the SVG path element of the pump:

Note you can check this by executing following two javascript statements in the Developer console window of your browser:

document.getElementById('pump').getBBox().x + document.getElementById('pump').getBBox().width/2;
document.getElementById('pump').getBBox().y + document.getElementById('pump').getBBox().height/2;

Fan is NOT rotating around its center

Again when you hover with your mouse to the center of the fan:

The same coordinates are being used for the rotation transformation origin:

So you would expect again that the animation let's the fan rotate around its center point, but that is NOT the case:

fan_rotate_wrong

The solution

The reason that the fan is not rotating about it's center point, is that the bounding box of the path element (used to draw your fan) has a different center point:

This bounding box center point will now follow a circular path around the animation origin, when being rotated around that origin.

So if we change the transformation origin to have the same coordinates as the bounding box center point:

Then the animation will let the fan rotate nicely around its center:

fan_rotate_good

Here you can find an updated flow:

[{"id":"8b5d5a5821c20631","type":"ui_svg_graphics","z":"fc07fa0e875fef3e","group":"3734b74f2e40185a","order":1,"width":0,"height":0,"svgString":"<svg xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" id=\"svg2\" version=\"1.1\" inkscape:version=\"1.3 (0e150ed6c4, 2023-07-21)\" width=\"1200\" height=\"600\" viewBox=\"0 0 1200 600\" sodipodi:docname=\"flame-svgrepo-proverka.svg\" xml:space=\"preserve\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1200\" height=\"600\" style=\"fill:none;stroke:none\"/>\n    <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" id=\"namedview4\" showgrid=\"false\" borderlayer=\"true\" inkscape:showpageshadow=\"false\" inkscape:zoom=\"1.3788818\" inkscape:cx=\"568.93929\" inkscape:cy=\"192.54733\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg2\" showguides=\"false\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\">\n        <inkscape:grid type=\"xygrid\" id=\"grid3757\" empspacing=\"100\" visible=\"false\" enabled=\"true\" snapvisiblegridlinesonly=\"false\" originx=\"0\" originy=\"0\" spacingy=\"1\" spacingx=\"1\" units=\"px\"/>\n    </sodipodi:namedview>\n    <metadata id=\"metadata8\">\n        <rdf:RDF>\n            <cc:Work rdf:about=\"\">\n                <dc:format>image/svg+xml</dc:format>\n                <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n            </cc:Work>\n        </rdf:RDF>\n    </metadata>\n    <defs id=\"defs6\">\n        <linearGradient id=\"linearGradient13\" inkscape:collect=\"always\">\n            <stop style=\"stop-color:#b0b0b0;stop-opacity:1;\" offset=\"0\" id=\"stop13\"/>\n            <stop style=\"stop-color:#b0b0b0;stop-opacity:0;\" offset=\"1\" id=\"stop14\"/>\n        </linearGradient>\n        <rect x=\"818.44757\" y=\"111.79296\" width=\"47.178682\" height=\"25.640588\" id=\"rect13\"/>\n        <linearGradient id=\"swatch12\" inkscape:swatch=\"solid\">\n            <stop style=\"stop-color:#07070a;stop-opacity:1;\" offset=\"0\" id=\"stop12\"/>\n        </linearGradient>\n        <inkscape:perspective sodipodi:type=\"inkscape:persp3d\" inkscape:vp_x=\"0 : 300 : 1\" inkscape:vp_y=\"0 : 1000 : 0\" inkscape:vp_z=\"1200 : 300 : 1\" inkscape:persp3d-origin=\"600 : 200 : 1\" id=\"perspective6\"/>\n        <marker style=\"overflow:visible\" refX=\"0\" refY=\"0\" orient=\"auto\" inkscape:stockid=\"Colored diamond\" id=\"ColoredDiamond\" markerWidth=\"1\" markerHeight=\"1\" viewBox=\"0 0 1 1\" inkscape:isstock=\"true\" inkscape:collect=\"always\" preserveAspectRatio=\"xMidYMid\">\n            <path transform=\"scale(0.45)\" style=\"fill:context-fill;fill-rule:evenodd;stroke:context-stroke;stroke-width:2\" d=\"M 0,-7.0710768 -7.0710894,0 0,7.0710589 7.0710462,0 Z\" id=\"path22\"/>\n        </marker>\n        <linearGradient id=\"swatch4\" inkscape:swatch=\"solid\">\n            <stop style=\"stop-color:#03030e;stop-opacity:1;\" offset=\"0\" id=\"stop4\"/>\n        </linearGradient>\n        <linearGradient inkscape:collect=\"always\" xlink:href=\"#swatch12\" id=\"linearGradient12\" x1=\"436.78378\" y1=\"249.24775\" x2=\"459.99101\" y2=\"249.24775\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"matrix(1.0002027,0,0,0.99041234,395.28697,1.5738251)\"/>\n        <linearGradient inkscape:collect=\"always\" xlink:href=\"#linearGradient13\" id=\"linearGradient14\" x1=\"818.3525\" y1=\"119.37472\" x2=\"853.43461\" y2=\"119.37472\" gradientUnits=\"userSpaceOnUse\"/>\n        <rect x=\"818.44757\" y=\"111.79296\" width=\"47.17868\" height=\"25.640589\" id=\"rect13-5\"/>\n    </defs>\n    <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:0.771881\" id=\"rect1\" width=\"514.86304\" height=\"239.99591\" x=\"379.48068\" y=\"332.302\"/>\n    <ellipse style=\"display:inline;opacity:0.634;mix-blend-mode:normal;fill:#b0b0b0;fill-opacity:1;fill-rule:evenodd;stroke-width:1.20264\" id=\"boiler_topka\" cx=\"637.93781\" cy=\"451.27435\" rx=\"254.35464\" ry=\"118.97232\" inkscape:label=\"boiler_topka\"/>\n    <g style=\"fill:#000000\" id=\"g2\" transform=\"matrix(3.4554647,0,0,2.5896595,424.87909,423.8962)\">\n        <g id=\"g1\" transform=\"matrix(0.05801723,0,0,0.04604431,0.56715887,-3.237024)\">\n\n            <path d=\"m1.8377893,225.27967c-1.76363003,6.53649,6.3521897,11.14746,11.0876507,6.30851c25.705276,-26.26559,72.222333,-56.21501,144.22652,-41.95362c120.07382,23.78308,183.27404,40.51368,183.27404,40.51368c0,0,-62.22198,30.84206,-110.96913,86.99004c-46.91564,54.03901,-112.6114,92.7796,-179.94695,69.99115c-6.319687,-2.13847,-11.480062,5.36553,-7.192215,10.47646c33.276049,39.67399,90.925935,79.51837,183.985605,64.19625c28.51852,-4.32299,67.05275,-16.45533,112.98771,-43.52109c58.15231,-34.59236,81.75644,-66.15461,91.04423,-83.41592c2.77869,-5.16341,-2.08872,-11.08955,-7.71231,-9.4306c-66.7816,19.70067,-89.80675,-1.84798,-54.38747,-25.22371c14.1472,-9.33595,40.13708,-18.84232,72.72968,-26.30478c54.2609,-12.42366,106.51305,-40.95531,143.95596,-86.05465c9.73708,-11.72801,18.34867,-24.81408,24.98008,-39.08407c2.40152,-5.1663,-2.47773,-10.74094,-7.92446,-9.07118C565.80278,150.78333,459.82892,172.50618,312.70785,108.85503C176.67951,51.745133,94.396404,104.78344,72.735313,121.87809C31.228575,154.58278,10.929671,191.59276,1.8377893,225.27967Z\" id=\"flame\" inkscape:label=\"burn1\" style=\"display:inline;fill:#ff0000\"/>\n\n        </g>\n    </g>\n    <g id=\"g5\">\n        <rect style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"burn5\" width=\"109.702000\" height=\"41.495500\" x=\"304.652000\" y=\"432.120000\"/>\n        <ellipse style=\"fill:#0e000e;fill-opacity:1;fill-rule:evenodd;stroke:#05050c;stroke-width:0.495414;stroke-opacity:1;marker-start:url(#ColoredDiamond);paint-order:normal;stroke-dasharray:none\" id=\"path3\" cx=\"309.85150146484375\" cy=\"473.0688781738281\" rx=\"41.138161\" ry=\"46.409466\" inkscape:label=\"path3\"/>\n    </g>\n    <g style=\"fill:#000000\" id=\"g6\" transform=\"matrix(0.31399429,0,0,0.2721321,151.78545,211.27161)\">\n        <g id=\"g4\" style=\"fill:#ff0000\" transform=\"matrix(0.57170312,0,0,0.60321157,363.03914,818.08901)\">\n <g id=\"g3\" style=\"fill:#ff0000\">\n <g id=\"g2-5\" style=\"fill:#ff0000\">\n\n                    <path d=\"M245,60.3C143.1,60.3,60.3,143.1,60.3,245C60.3,346.9,143.1,429.7,245,429.7C346.9,429.7,429.7,346.9,429.7,245C429.7,143.1,346.9,60.3,245,60.3Zm0,23.3c35.8,0,64.9,16.7,64.9,37.3c0,12.1,-6.2,46.7,-18.7,72.7C275.8,180,240.8,166.9,208.8,186.2C192.1,161.3,180.4,132.1,180.4,120.9C180.1,100.3,209.2,83.6,245,83.6ZM294.4,245c0,27.2,-22.2,49.4,-49.4,49.4c-27.2,0,-49.4,-22.2,-49.4,-49.4c0,-27.2,22.2,-49.4,49.4,-49.4c27.2,0,49.4,22.2,49.4,49.4Zm-210.8,0c0,-35.8,16.7,-64.9,37.3,-64.9c12.1,0,46.7,6.2,72.7,18.7c-29.4,29.2,-14,71.9,-7.4,82.4c-24.9,16.7,-54.1,28.4,-65.3,28.4C100.3,309.9,83.6,280.8,83.6,245ZM245,406.4c-35.8,0,-64.9,-16.7,-64.9,-37.3c0,-12.1,6.2,-46.7,18.7,-72.7c15.9,13.6,52.2,26.5,82.4,7.4c16.7,24.9,28.4,54.1,28.4,65.3c0.3,20.6,-28.8,37.3,-64.6,37.3Zm124.4,-96.5c-12.1,0,-46.7,-6.2,-72.7,-18.7c10.9,-12.4,28.9,-46.5,7.4,-82.4c24.9,-16.7,54.1,-28.4,65.3,-28.4c20.6,0,37.3,29.2,37.3,64.9c-0.3,35.5,-17,64.6,-37.3,64.6Z\" id=\"fan\" style=\"fill:#ff0000\" inkscape:label=\"fan\"/>\n \n\n                </g>\n </g>\n</g>\n    </g>\n    <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke:#05050c;stroke-opacity:1\" id=\"rect12\" width=\"23.207232\" height=\"169.70271\" x=\"434.86566\" y=\"162.45049\" inkscape:label=\"pipe_obratka\"/>\n    <rect style=\"opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient12);stroke-width:0.995295\" id=\"rect12-1\" width=\"23.211937\" height=\"168.07565\" x=\"832.1593\" y=\"164.39404\" inkscape:label=\"pipe_podacha\"/>\n    <text xml:space=\"preserve\" id=\"text12\" style=\"white-space:pre;shape-inside:url(#rect13);display:inline;opacity:1;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_obratka\" transform=\"matrix(2.2200088,0,0,2.5378274,-1009.5413,-167.68056)\">\n        <tspan x=\"818.44727\" y=\"122.74093\" id=\"tspan4\">\n            <tspan style=\"fill:url(#linearGradient14)\" id=\"value_podacha\">00,00</tspan>\n        </tspan>\n    </text><text xml:space=\"preserve\" id=\"text12-1\" style=\"white-space:pre;shape-inside:url(#rect13-5);display:inline;fill:#b0b0b0;fill-opacity:1;stroke:#05050c;stroke-width:1.795;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke\" inkscape:label=\"value_temperature_podacha\" transform=\"matrix(2.2200088,0,0,2.5378274,-1407.0403,-160.87847)\">\n        <tspan x=\"818.44727\" y=\"122.74093\" id=\"value_obratka\">\n            <tspan style=\"fill:url(#linearGradient14)\" id=\"tspan5\">00,00</tspan>\n        </tspan>\n    </text>\n    <path fill=\"#000000\" d=\"m642.29673,300.10265q9.53428,0,17.82496,-4.42368q7.95905,-4.27115,12.60183,-11.5931q4.80859,-7.62704,4.80859,-16.39814q0,-8.77109,-4.80859,-16.39813q-4.64278,-7.32196,-12.60183,-11.59309q-8.29068,-4.42368,-17.82496,-4.42368q-9.53428,0,-17.82496,4.42368q-7.95905,4.27113,-12.60182,11.59309q-4.8086,7.62704,-4.8086,16.39813q0,8.7711,4.8086,16.39814q4.64277,7.32195,12.60182,11.5931q8.29068,4.42368,17.82496,4.42368Zm0,-6.25417q-7.71033,0,-14.34287,-3.50844q-6.46673,-3.50844,-10.28044,-9.45753q-3.81371,-6.10163,-3.81371,-13.19477q0,-7.09314,3.81371,-13.19478q3.81371,-5.94909,10.28044,-9.45753q6.63254,-3.50844,14.34287,-3.50844q2.98465,0,5.96929,0.53389l-32.25074,25.62685l32.16783,25.62686q-2.90173,0.53389,-5.88638,0.53389Zm13.84543,-3.27963m-29.92934,-23.03366m29.68062,-22.88111q6.79836,3.43217,10.77788,9.45752q4.06244,6.25418,4.06244,13.538q0,7.28383,-3.97953,13.46173q-3.97952,6.02535,-10.61207,9.45752Z\" id=\"pump\" style=\"display:inline;opacity:1;fill:#ff0000;stroke-width:0.0795196\" inkscape:label=\"pump\"/>\n    <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.02634\" id=\"rect17-1\" width=\"155.0338\" height=\"10.256235\" x=\"676.68903\" y=\"264.51282\" inkscape:label=\"pipe_pump_podacha\"/>\n    <rect style=\"fill:#0000ff;fill-rule:evenodd;stroke-width:1.01224\" id=\"rect17\" width=\"150.8031\" height=\"10.256235\" x=\"456.4025\" y=\"263.07242\" inkscape:label=\"pipe_pump_podacha\"/>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"1_an","targetId":"fan","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,244,244","toValue":"360,244,244","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"86400","end":"restore","delay":"1","delayUnit":"s","custom":""},{"id":"2_an","targetId":"pump","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,641,267","toValue":"360,641,267","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"86400","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[{"selector":"#temperature","bindSource":"msg.payload","bindType":"text","attribute":""},{"selector":"#flame","bindSource":"payload.color","bindType":"attr","attribute":"fill"},{"selector":"#flame","bindSource":"msg.payload","bindType":"attr","attribute":"hidden"},{"selector":"#flame2","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//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":1180,"y":420,"wires":[[]]},{"id":"c856096df27c1311","type":"ui_button","z":"fc07fa0e875fef3e","name":"","group":"3734b74f2e40185a","order":3,"width":0,"height":0,"passthru":false,"label":"button2 - pump","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='2_an']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":940,"y":480,"wires":[["8b5d5a5821c20631"]]},{"id":"cc77c373ae416c87","type":"ui_button","z":"fc07fa0e875fef3e","name":"","group":"3734b74f2e40185a","order":2,"width":0,"height":0,"passthru":false,"label":"button 1 - fan","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='1_an']\",\"action\":\"start\"}","payloadType":"json","topic":"topic","topicType":"msg","x":930,"y":420,"wires":[["8b5d5a5821c20631"]]},{"id":"3734b74f2e40185a","type":"ui_group","name":"Group 1","tab":"dbd90ca2f8e7a269","order":1,"disp":true,"width":"13","collapse":false,"className":""},{"id":"dbd90ca2f8e7a269","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

The root cause of confusion

The confusing thing is that the center points of your fan (when you hoover above it with your mouse), totally don't correspond to the center point of its bounding box. Which should be the same, because the bounding box is simply a rectangle around your fan's circle.

The reason is that your fan path element is nested inside a couple of group elements, and some of these group elements have their own transformation:

What you see in your drawing is your fan (i.e. a path element), which is being transformed (i.e moved, scaled, rotated, ...). So while you see your shape at a certain location with a certain size, in fact it is located at another position in your drawing. You can check that easily by removing the transformations from all the group elements in your SVG drawing. Then indeed you will see as center point for your untransformed fan path, the same coordinates as we got via the bounding box:

Note that the section "root cause of confusion" is not fully waterproof. It has also something to do with the different coordinate systems.

getBBox returns coordinates in the local coordinate system after the application of transforms.

But my time is up for today...

Thanks it was very useful for me

bartbutenaers / node-red-contrib-ui-svg