# How to change svg circle attribute based on msg.payload and msg.topic?

**URL:** https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366
**Category:** Dashboard
**Created:** [24 November 2019 22:36 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366 "2019-11-24T22:36:10Z")
**Posts on this page:** 1
**Showing post:** 12

<div class="post-metadata">

### Author: ![gr1nch](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gr1nch/32/14302_2.png) [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [27 November 2019 00:32 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/12 "2019-11-27T00:32:19Z")

</div>

> [@TotallyInformation](#):
>
> Is this a duplicate thread because I could swear that I'd commented on this?

Not really, but the project is the same. This thread is about processing incoming data into the UI to change UI elements - now solved thanks to you guys. The other thread is about making on click events work to send custom topic/payloads out.

> [@TotallyInformation](#):
>
> Anyway, my comment was: have you tried the SVG Dashboard extension node? I think this is the kind of thing that it was designed for?

Yes, I tried it but the code I have possibly (in its current form) confuses the svg node as no on click events work with it.

> [@TotallyInformation](#):
>
> Of course, I also have an example you could use as a basis using uibuilder if you don't actually need Dashboard 😉

I see you like uibuilder 😉 . I installed it to try it out but currently your "Clickable Dial" code renders fine but I get not on click events.

> [@hotNipi](#):
>
> > [@gr1nch](#):
> >
> > get the lightbulb in the centre
> 
> Texts in svg aligned by using coordinates (pixels or percentages) and additionally baseline and anchor adjustments.
> 
> If you have center of your svg known, adjust text with icon to be` x=50%` and `y=50%` (or in pixels if needed)  
> then add `dominant-baseline="middle" text-anchor="middle"` inline and you should have centered icon.
> 
> [dominant-baseline - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)  
> [text-anchor - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)

Thanks @hotNipi. I read the `dominant-baseline` doc as you suggested but did not understand it at all as I do not have enough pre-knowledge to make sense of it. However I added your code snippet to my "clickable dial" and the lightbulb centres sweetly. I changed the x value back to 50% and adjusted the y value down to 47% to make it aesthetically pleasing to my eye.

> [@TotallyInformation](#):
>
> See my reply in the other thread which includes a path that eliminates the need for FontAwesome.

I tried to find that but the only FontAwesome reference in the thread was in the OP - [How to make an svg circle element on click, in a mustache template, output topic/payload?](https://discourse.nodered.org/t/how-to-make-an-svg-circle-element-on-click-in-a-mustache-template-output-topic-payload/18424)

---

_[View the full topic](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366)._