# Node-red-contrib-ui-svg

**URL:** <https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140>\
**Category:** General\
**Created:** [7 July 2021 13:58 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140 "2021-07-07T13:58:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [7 July 2021 13:58 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/1 "2021-07-07T13:58:34Z")

</div>

Hi

I am trying to use the svg node to animate an image, so that it just rotates on its centre point. I have checked the WiKi and examples but cannot work out the relevance of the from and to parameters in teh animation

Any help appreciated

 ![Animate](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d36c27bceb59f1c72c44906f3c47c5d26280eb2.jpeg)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 July 2021 15:35 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/2 "2021-07-07T15:35:05Z")

</div>

Hi @mtoko,

At the time being I had created following example:

![gear](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8ea84e1e0587f2fea699fd73dde00dcb972c0b7.gif)

See [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/48#issuecomment-581649047) for the example flow and extra information about it.

Hopefully that makes things a bit more clear ...  
Bart

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 July 2021 15:50 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/3 "2021-07-07T15:50:12Z")

</div>

That does my brain in, one of them is going the wrong way.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 July 2021 16:09 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/4 "2021-07-07T16:09:36Z")

</div>

Haha, I was wondering all that time who would be the first one to see that. I thought: most probably it will be someone retired, who has too much free time 🤣

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 July 2021 16:24 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/5 "2021-07-07T16:24:49Z")

</div>

> [@BartButenaers](#):
>
> too much free time

If only that were true!

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [7 July 2021 17:55 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/6 "2021-07-07T17:55:37Z")

</div>

Hi Bart  
Thanks for the reply. I have been staring at that example all day. If you look at the screen shot I included it is from that example. I cannot work out what the relationship is to the 0, 300, 390 and 360, 300 390 in the from and to settings. Is this x and y co-ordinates on the drawing?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 July 2021 18:04 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/7 "2021-07-07T18:04:04Z")

</div>

> [@Colin](#):
>
> That does my brain in, one of them is going the wrong way.

That must be what causes the stutter 🤣  
As soon as I saw that, I was "Something is wrong here...wait. one of the gears are going the wrong way

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 July 2021 18:09 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/8 "2021-07-07T18:09:20Z")

</div>

> [@mtoko](#):
>
> I have been staring at that example all day

Can I assume you are also retired? 😂

It is some time ago that I wrote that example, but it seems it works like [this](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#rotate):

The `rotate(<a> [<x> <y>])` transform function specifies a rotation by `a` degrees about a given point. If optional parameters `x` and `y` are not supplied

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [8 July 2021 08:00 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/9 "2021-07-08T08:00:09Z")

</div>

Thanks Bart

That pointed me in the right direction, but the image did not rotate around the centre but around one corner. I noticed that SVG Editor defaults to corner when you draw the image, when I drew a new image with centre as the origin the image rotated around the centre.

😀

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 July 2021 08:00 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg/48140/10 "2021-07-22T08:00:30Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.