SVG Node, Rotate an Element

General
3

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