Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with rotate animation #129

Open
stdalexius opened this issue Nov 11, 2023 · 8 comments
Open

Problem with rotate animation #129

stdalexius opened this issue Nov 11, 2023 · 8 comments

Comments

@stdalexius
Copy link

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.
@bartbutenaers
Copy link
Owner

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

@stdalexius
Copy link
Author

[{"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}]

@stdalexius
Copy link
Author

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}]

@bartbutenaers
Copy link
Owner

@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...

@stdalexius
Copy link
Author

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!

@bartbutenaers
Copy link
Owner

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:

image

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

image

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:

image

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:

image

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

image

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:

image

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:

image

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:

image

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:

image

@bartbutenaers
Copy link
Owner

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...

@stdalexius
Copy link
Author

Thanks it was very useful for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bartbutenaers @stdalexius