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

**URL:** <https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 16, 2024, 6:55am UTC](https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271 "2024-07-16T06:55:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 16, 2024, 6:55am UTC](https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271/1 "2024-07-16T06:55:25Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/8050114ad602afd5f717e13c2550c4327d914db1.png)

Client (browser):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/522cf3ba0dbea208224dacb9a48f0122fbc26f6d.png)

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 16, 2024, 9:42am UTC](https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271/2 "2024-07-16T09:42:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [November 13, 2024, 8:32pm UTC](https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271/3 "2024-11-13T20:32:31Z")

</div>

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](https://www.w3schools.com/cssref/sel_attr_end.php) matches any attribute that ends with that value so it'll avoid all the junk that gets appended to the front.

For this case:

```css
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.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [November 14, 2024, 9:15am UTC](https://forum.inductiveautomation.com/t/bug-svg-filter-ids-which-are-dynamically-auto-named-in-client-not-showing-auto-named-value-in-binding/93271/4 "2024-11-14T09:15:59Z")

</div>

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

> [@\[Bug\] SVG Markers not displaying](https://forum.inductiveautomation.com/t/bug-svg-markers-not-displaying/84930):
>
> Ignition 8.1.36 SVG markers when embedded in perspective will not map the url(#\<markerId\>) in rendered pages. To make the markers show on the browser, I have to manually modify the style tags on every element with a marker: from url(#marker40) to url(#C-0-3-0-0-marker40) This is the SVG when imported into perspective: [ { "type": "defs", "id": "defs1", "elements": [ { "type": "marker", "id": "marker45", "style": { "overflow": "visible" …