# Fill color for \<svg\> does not work

**URL:** <https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679>\
**Category:** Dashboard\
**Created:** [3 May 2024 09:37 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679 "2024-05-03T09:37:59Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 09:37 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/1 "2024-05-03T09:37:59Z")

</div>

Hi,  
I have a template node and want to change the fill color of a svg icon. Therefor I have the following code.

```xml
<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32" >
    <path fill="{{msg.color}}" d="M400-585 272-713q38-23 80.5-35t87.5-12q5 0 10 .5t10 .5q-29 32-44.5 73T400-600v15Zm313 313-88-88q35 2 68-5.5t63-24.5q-5 32-15.5 61.5T713-272ZM552-520l128-360h80l128 360h-76l-28-80H656l-28 80h-76Zm122-134h92l-46-146-46 146ZM537-220 220-537q-10 23-15 47.5t-5 49.5q0 100 70 170t170 70q25 0 49.5-5t47.5-15ZM791-80l-57 57-138-138q-36 20-75 30.5T440-120q-134 0-227-93t-93-227q0-42 10.5-81t30.5-75L14-743l57-57L791-80ZM379-378Z" />
</svg>

```

Unfortunately this doesn't work, the color of the icon doesn't change to green e.g. when I inject msg.color = "green".  
Instead this work, but I like to understand why:

```xml
<style>
    #STYLE_1 path {
        fill: {{msg.color}};
    }
</style>

<svg id="STYLE_1" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32" >
    <path d="M400-585 272-713q38-23 80.5-35t87.5-12q5 0 10 .5t10 .5q-29 32-44.5 73T400-600v15Zm313 313-88-88q35 2 68-5.5t63-24.5q-5 32-15.5 61.5T713-272ZM552-520l128-360h80l128 360h-76l-28-80H656l-28 80h-76Zm122-134h92l-46-146-46 146ZM537-220 220-537q-10 23-15 47.5t-5 49.5q0 100 70 170t170 70q25 0 49.5-5t47.5-15ZM791-80l-57 57-138-138q-36 20-75 30.5T440-120q-134 0-227-93t-93-227q0-42 10.5-81t30.5-75L14-743l57-57L791-80ZM379-378Z" />
</svg>

```

The problem is, that copying such a template will mean much more adaption effort since I need to make the name unique in order to get it working in case I have more than one of such templates. Therefor the first solution can be used out of the box without manual adaption effort.

Does anybody know why the first way doesn't work?

---

<div class="post-metadata">

**Author:** ![homeplayer](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/homeplayer/32/12388_2.png) [@homeplayer](https://discourse.nodered.org/u/homeplayer)\
**Post date:** [3 May 2024 09:42 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/2 "2024-05-03T09:42:53Z")

</div>

The first method doesn't work because Node-RED's template node doesn't directly support binding attributes like `fill` within the SVG element. It's not able to dynamically change the SVG attribute based on the value of `msg.color` . The second method using CSS works because it applies the style to the SVG using an ID selector, which is supported by Node-RED's template node.

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 09:48 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/3 "2024-05-03T09:48:57Z")

</div>

Thanks for the quick reply. So I thought changing it to this will reduce the adaption effort as well, but setting the ID dynamically doesn't work either. Any idea how to get this working?  
I pass in the node id which in fact is unique, this looks similar to **22a1e4a43f772235**. When inspecting with developer tools inside my chrome browser, I see this Id got replaced, however it doesn't show up the desired color.

```xml
<style>
    #{{msg.id}} path {
        fill: {{msg.color}};
    }
</style>
<svg id="{{msg.id}}" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32" >
    <path d="M400-585 272-713q38-23 80.5-35t87.5-12q5 0 10 .5t10 .5q-29 32-44.5 73T400-600v15Zm313 313-88-88q35 2 68-5.5t63-24.5q-5 32-15.5 61.5T713-272ZM552-520l128-360h80l128 360h-76l-28-80H656l-28 80h-76Zm122-134h92l-46-146-46 146ZM537-220 220-537q-10 23-15 47.5t-5 49.5q0 100 70 170t170 70q25 0 49.5-5t47.5-15ZM791-80l-57 57-138-138q-36 20-75 30.5T440-120q-134 0-227-93t-93-227q0-42 10.5-81t30.5-75L14-743l57-57L791-80ZM379-378Z" />
</svg>

```

---

<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:** [3 May 2024 13:51 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/4 "2024-05-03T13:51:04Z")

</div>

Set a class in the template settings and use that class as the selector.

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 14:35 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/5 "2024-05-03T14:35:33Z")

</div>

Can you share an example how this will look like?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 May 2024 15:33 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/6 "2024-05-03T15:33:17Z")

</div>

This allow you to identify this specific template.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11fcac65cdb12f31247f0e4ca92a5a4dfaf41032.png)

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 16:25 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/7 "2024-05-03T16:25:48Z")

</div>

I already have a global css template defined, but I didn‘t know how to define the mentioned class and access it within the svg id property.  
Maybe a stupid question but I am not that fimilar to html/css.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2024 16:50 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/8 "2024-05-03T16:50:42Z")

</div>

You setup CSS.

You add a class name to the template.

If you want to make dynamic runtime changes, you send a msg with `.classname` set.

This way, you can keep your presentation CSS separate and centralised and anywhere you want to use the class, just apply the class.

An example: [My template nodes are ignoring my relations - #4 by Steve-Mcl](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/4)

Another example: [How to use pay load in one text output trigger color applied to another? - #2 by Steve-Mcl](https://discourse.nodered.org/t/how-to-use-pay-load-in-one-text-output-trigger-color-applied-to-another/62658/2)

Yet another: [The colour in/on this isn't changing. (CSS) - #2 by Steve-Mcl](https://discourse.nodered.org/t/the-colour-in-on-this-isnt-changing-css/59639/2)

A (somewhat in-depth) chat about it (some useful tips and info): [Dashboard Button Node - \</\>Class Field not working - #19 by Steve-Mcl](https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651/19) (read from there down)

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 18:24 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/9 "2024-05-03T18:24:46Z")

</div>

@Steve-Mcl thanks for the links. I am struggling with the correct selector. I set my classname in a function like that:

```java
if (msg.payload === false)
{
    msg.classname = "white-svg";
    msg.payload = "M 480 -180 q -66 0 -113 -47 t -47 -113 H 200 q -33 0 -56.5 -23.5 T 120 -420 q 0 -140 92 -241.5 T 440 -778 v -122 h 80 v 122 q 136 15 228 116.5 T 840 -420 q 0 33 -23.5 56.5 T 760 -340 H 640 q 0 66 -47 113 t -113 47 Z M 200 -420 h 560 q 0 -116 -82 -198 t -198 -82 q -116 0 -198 82 t -82 198 Z m 280 160 q 33 0 56.5 -23.5 T 560 -340 H 400 q 0 33 23.5 56.5 T 480 -260 Z m 0 -80 Z"; 
}
else
{
    msg.classname = "yellow-svg";
    msg.payload = "M 480 -180 q -66 0 -113 -47 t -47 -113 H 200 q -33 0 -56.5 -23.5 T 120 -420 q 0 -140 92 -241.5 T 440 -778 v -122 h 80 v 122 q 136 15 228 116.5 T 840 -420 q 0 33 -23.5 56.5 T 760 -340 H 640 q 0 66 -47 113 t -113 47 Z M 200 -420 h 560 q 0 -116 -82 -198 t -198 -82 q -116 0 -198 82 t -82 198 Z m 280 160 q 33 0 56.5 -23.5 T 560 -340 H 400 q 0 33 23.5 56.5 T 480 -260 Z m 0 -80 Z M 440 -20 v -120 h 80 v 120 h -80 Z m -246 -126 L 138 -204 L 224 -288 L 280 -232 L 194 -146 Z M 766 -143 l -84 -86 l 56 -56 l 86 86 l -58 56 Z";
}

```

In my global stylesheet I have tried 2 selectors:

```xml
    .white-svg .nr-dashboard-template svg {
          fill: white !important;
          }
     .yellow-svg .nr-dashboard-template svg {
          fill: #FEA500 !important;
          }

```

and

```xml
    .white-svg md-card>svg {
          fill: white !important;
          }
     .yellow-svg md-card>svg {
          fill: #FEA500 !important;
          }

```

but both aren't working. Any ideas what I am doing wrong in terms of the selector?  
The svg is directly placed inside a template node.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2024 18:29 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/10 "2024-05-03T18:29:36Z")

</div>

if you put `$('.white-svg .nr-dashboard-template svg')` into the browsers console does it select the SVG?

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 18:35 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/11 "2024-05-03T18:35:41Z")

</div>

Nope, it return `not available`. And if a select the svg tag and click copy selector I do not get something realy useful `#Erdgeschoss_Zimmer_Benno_cards > md-card:nth-child(12) > svg`.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2024 18:37 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/12 "2024-05-03T18:37:02Z")

</div>

> [@lori](#):
>
> I do not get something realy

I dont have dashboard installed - show me a screenshot of the SVG with its parents expanded upto the top most item

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 18:43 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/13 "2024-05-03T18:43:57Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b16b5f73d23fe81bdf3bd3ae24f4bcab9e18a0d.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2024 19:04 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/14 "2024-05-03T19:04:43Z")

</div>

first, correct your function - it should be `msg.className = "white-svg"` ( **note the `className` not `classname`** )

next, as explained in the link ealier, instead of using `!important`, be more specific

e.g.

```auto
<style>
    .nr-dashboard-theme .nr-dashboard-template.white-svg svg path {
        fill: white;
    }
    .nr-dashboard-theme .nr-dashboard-template.yellow-svg svg path {
        fill: #FEA500;
    }
</style>

```

If that doesnt work, try setting the fill of the path to `"currentFill"` or `"currentColor"` or removing the `fill` attribute from the path altogether. As a last resort, add `!important`

---

<div class="post-metadata">

**Author:** ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)\
**Post date:** [3 May 2024 19:34 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/15 "2024-05-03T19:34:00Z")

</div>

> [@Steve-Mcl](#):
>
> first, correct your function - it should be `msg.className = "white-svg"` ( **note the `className` not `classname`** )

I wasn't aware that the props are case sensitiv, corrected and used your intended style without `!important` and it work like a charme. Many thanks!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2024 20:31 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/16 "2024-05-03T20:31:03Z")

</div>

> [@lori](#):
>
> props are case sensitive

For future readers

- JavaScript is 100% case sensitive 🙂
  - basically `msg.payload` is NOT the same as `Msg.payload`
  - just as `msg.classname` is NOT the same as `msg.className`

- CSS and HTML are not (mostly)

---

<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:** [17 May 2024 20:31 UTC](https://discourse.nodered.org/t/fill-color-for-svg-does-not-work/87679/17 "2024-05-17T20:31:16Z")

</div>

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