[BUG] SVG filter ids which are dynamically auto-named in client not showing auto-named value in binding

Ignition
1

Embedded SVGs that have filters have their id's automatically renamed in the client to make each filter id name unique.

If I want to apply filters dynamically to components, I'm unable to because I don't know what the filter's id will be renamed to, as binding to the filter's id does not update to its renamed value in the browser, it stays at the value it is in the designer.

e.g.
Designer:
image

Client (browser):
image

Binding to elements[0]['elements'][1]['id'] will return desaturate in the browser, not s0_1-desaturate as I would have expected.
Without knowing the id value in the browser, i'm unable to dynamically apply the filter.

2

They did this because there were issues with templates and embeded views using the same svg.
It might be possible to reconstruct this prefix with self.view.id. or something
See if you can match a patern in the view id and te prefix, or hope someone of IA shares us the way its generated

3

Came across this post while I was having the same problem.

Not sure if you figured something else out, but a solution I am using is the [attribute$=value] selector when applying styles in the Advanced Stylesheet. The selector matches any attribute that ends with that value so it'll avoid all the junk that gets appended to the front.

For this case:

path[id$="desaturate"] {
    color: magenta;
}

Works for me because my id names are pretty unique across the project but might run into some issues if your ids have similar endings.

4

I believe this is also related to this post. Lots of hiding of prefixes going on in SVGs.