# Opacity rectangle Svg node

**URL:** <https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021>\
**Category:** General\
**Created:** [29 January 2024 13:58 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021 "2024-01-29T13:58:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [29 January 2024 13:58 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/1 "2024-01-29T13:58:52Z")

</div>

I'm trying to change the transparacy of an Svg **rectangle** element in the [svg node](https://flows.nodered.org/node/node-red-contrib-ui-svg) from Bart, but can't get it working.  
Tried almost every combination fill-opacity with underscore or with dash, the attribute value as string or int. But it will not work, nothing changes regarding the opacity.  
Rest of the payload is working fine.

```auto
msg.payload = [
    {
        "command": "update_style",
        "selector": "#rect_2509",
        "attributeName": "fill",
        "attributeValue": achtergrondkleur
    },
     {
        "command": "set_attribute",
        "selector": "#rect_2509",
        "attributeName": "fill-opacity",
        "attributeValue": "10"
    },
    {
        "command": "update_text",
        "selector": "#txt_2509",
        "textContent": pcOnline
    }
]

```

---

<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:** [29 January 2024 15:28 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/2 "2024-01-29T15:28:54Z")

</div>

If you are trying to hide it ?

you could try -  
{  
"command": "set\_attribute",  
"selector": "#rect\_2509",  
"attributeName": "visibility",  
"attributeValue": "hidden"

}

---

<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:** [29 January 2024 16:02 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/3 "2024-01-29T16:02:43Z")

</div>

it is very possible you are doing it right but the property is not affected due to svg fill inheritance. For example, have you set the `fill="currentColor"` attribute?

if you inspect the SVG and edit the attributes directly in the HTML do you see the changes you expect?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [29 January 2024 19:30 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/4 "2024-01-29T19:30:19Z")

</div>

Got it,  
You need to set in the Svg editor the style location of the rectangle to **attribute**. Default it's **inline**.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0df99decdc91317b0d8d33d65b0c52569f0558b1.png)

Also the attribute opacity value is between 0 and 1, not 0 to 100 as I googled in the first place.

Thanks for the help

---

<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:** [29 January 2024 23:18 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/5 "2024-01-29T23:18:54Z")

</div>

I use Inkscape on my PC as I find it much easier to work with. You can just copy / paste between the two.

---

<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:** [12 February 2024 23:19 UTC](https://discourse.nodered.org/t/opacity-rectangle-svg-node/85021/6 "2024-02-12T23:19:22Z")

</div>

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