# SVG Node, Rotate an Element
**URL:** https://discourse.nodered.org/t/svg-node-rotate-an-element/62603
**Category:** General
**Created:** [13 May 2022 21:46 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603 "2022-05-13T21:46:07Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@n61ab](https://discourse.nodered.org/u/n61ab)
#### Post date: [13 May 2022 21:46 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/1 "2022-05-13T21:46:07Z")
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
```auto
```
---
### Author:  [@edje11](https://discourse.nodered.org/u/edje11)
#### Post date: [13 May 2022 22:27 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/2 "2022-05-13T22:27:15Z")
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](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/docs/msg_control.md#updateset-an-attribute-value-via-msg)
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [13 May 2022 22:45 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/3 "2022-05-13T22:45:22Z")
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:
```auto
{
"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):
```auto
{
"command": "update_style",
"selector": "#my_rectangle",
"style": {
"transform-box": "fill-box",
"transform-origin": "center",
"transform": "rotate(45deg)"
}
}
```
Example flow with such a CSS message:
```auto
[{"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":"","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}]
```
---
### Author:  [@n61ab](https://discourse.nodered.org/u/n61ab)
#### Post date: [14 May 2022 00:20 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/4 "2022-05-14T00:20:37Z")
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
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [14 May 2022 04:17 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/5 "2022-05-14T04:17:46Z")
> [@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?
---
### Author:  [@9toejack](https://discourse.nodered.org/u/9toejack)
#### Post date: [14 May 2022 08:54 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/6 "2022-05-14T08:54:21Z")
@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.
---
### Author:  [@n61ab](https://discourse.nodered.org/u/n61ab)
#### Post date: [14 May 2022 10:24 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/7 "2022-05-14T10:24:22Z")
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
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [14 May 2022 10:53 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/8 "2022-05-14T10:53:50Z")
> [@n61ab](#):
>
> there is a "#" in front of the selector id name. What is the purpose of doing so?
This is a CSS [ID Selector](https://css-tricks.com/how-css-selectors-work/#aa-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](https://css-tricks.com/how-css-selectors-work/)**
>
> Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target
---
### Author:  [@n61ab](https://discourse.nodered.org/u/n61ab)
#### Post date: [14 May 2022 11:48 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/9 "2022-05-14T11:48:42Z")
Thanks, Steve.
OK, now I understand, and explains why my first set of selector commands did not work.
Alan
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 May 2022 11:49 UTC](https://discourse.nodered.org/t/svg-node-rotate-an-element/62603/10 "2022-05-28T11:49:01Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.