SVG Node, Rotate an Element

[n61ab]

I want to rotate a polygon in the SVG Node. I added the attribute, transform="rotate(45)", to the SVG code.

What are the commands to change the angle of rotation? I have tried the below, without success.

{
"command": "update_transform",
"selector": "#my_path",
"attributeName": "rotate",
"attributeValue": "(90)"
},

Alan

[edje11]

Have a look at the docs of the Svg node.
There's a sample for rotation on this page node-red-contrib-ui-svg/msg_control.md at master · bartbutenaers/node-red-contrib-ui-svg · GitHub

[BartButenaers]

Hi Alan,

When you look at the link that @edje11 did share, you will see an example flow that you can import. In that flow you can see that it is very easy to rotate a shape in SVG via a message like this:

{
   "command": "set_attribute",
   "selector": "#camera_living",
   "attributeName": "rotate",
   "attributeValue": "90"
}

Or if you like to do it with CSS, you can use a message like this one (to rotate the shape around its own center):

{
    "command": "update_style",
    "selector": "#my_rectangle",
    "style": {
        "transform-box": "fill-box",
        "transform-origin": "center",
        "transform": "rotate(45deg)"
    }
}

Example flow with such a CSS message:

[{"id":"4b3dd00f532c5f91","type":"inject","z":"47b91ceb.38a754","name":"Rotate 45°","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#my_rectangle\",\"style\":{\"transform-box\":\"fill-box\",\"transform-origin\":\"center\",\"transform\":\"rotate(45deg)\"}}","payloadType":"json","x":670,"y":640,"wires":[["14ea0f5ae45b5f77"]]},{"id":"14ea0f5ae45b5f77","type":"ui_svg_graphics","z":"47b91ceb.38a754","group":"28cdac6db4804909","order":19,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"200\" viewBox=\"0 0 200 200\" width=\"200\" style=\"background-color:white\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <rect id=\"my_rectangle\" x=\"40\" y=\"40\" width=\"40\" height=\"60\" style=\"fill:rgb(0,0,255)\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"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":860,"y":640,"wires":[[]]},{"id":"28cdac6db4804909","type":"ui_group","name":"Chained animation demo","tab":"8bbab1b47b8e87c8","order":1,"disp":true,"width":"10","collapse":false},{"id":"8bbab1b47b8e87c8","type":"ui_tab","name":"SVG","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[n61ab]

Thanks Bart and edje11.

I did try the flow from your GitHub Floor-plan example. I cannot get any of it to to work on my SVG node, v2.3.1.

Also, I cannot see the "rotate" attribute in the example SVG code.

What a I missing?

Alan

[BartButenaers]

@n61ab

I cannot see the "rotate" attribute in the example SVG code.

I have no idea where you are looking, but when I open the link from Evert then I see "rotate" both in the documentation and in the example flow:

@n61ab

I cannot get any of it to to work

Do you see errors in your Node-RED log, or in the browser console log (where your dashboard is running)? If you cannot find the latter one, you can always enable this option:

Then the errors in your browser will also be displayed in your Node-RED "Debug" sidebar on the right...

@BartButenaers

Example flow with such a CSS message:

And did you try this example I made for you last night? Does that also not work?

[9toejack]

@n61ab
if you look at your code example and its not working.
it looks just like @BartButenaers example except you have "()" around your 90.
remove the parentheses and try it again.
I've made mistakes where I use cap's when I shouldn't have.
see if that works for you.
Cheers.

[n61ab]

Thanks for helping, Bart

I found the image was causing the flow to not work. I removed the image from the SVG code, and the camera now rotates and changes color. The text, also, now changes.

I now understand the distinction between commands for "update_..." and "set_...", which went to my question on not seeing the attribute in the SVG code.

On more question. In the example flow commands, there is a "#" in front of the selector id name. What is the purpose of doing so?

Alan

[Steve-Mcl]

@n61ab

there is a "#" in front of the selector id name. What is the purpose of doing so?

This is a CSS ID Selector. If you want to address an element in the SVG you need to specify which one by a CSS selector.

• #my-rectangle would address the element with id="my-rectangle"
• rect would address ALL elements of type rect
• .circles would address ALL elements with class="circles"

Beginner Concepts: How CSS Selectors Work | CSS-Tricks

[n61ab]

Thanks, Steve.

OK, now I understand, and explains why my first set of selector commands did not work.

Alan