# SVG Elements - Binding Property Path References

**URL:** <https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 2, 2022, 5:19am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101 "2022-05-02T05:19:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacob.mann](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jacob.mann/32/35821_2.png) [@jacob.mann](https://forum.inductiveautomation.com/u/jacob.mann)\
**Post date:** [May 2, 2022, 5:19am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/1 "2022-05-02T05:19:51Z")

</div>

Is it possible to dynamically address an SGV element path? I have a binding that refers to a property within an element, and I want to be able to copy and paste the binding between multiple SVG elements that all have the same property without having ton manually update the array integers that address the specific element inside the binding.

Is there a way to reference the array position that the binding is in as the path to look for the property? So instead if using the integers 0,0 like my example, it just looks for the property inside the position that the binding is already in?

 ![Screenshot 2022-05-02 151502](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd77403025284d58afe71c97cbe1207e94e19304.jpeg)

---

<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:** [May 2, 2022, 7:53am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/2 "2022-05-02T07:53:20Z")

</div>

Unfortunately nope, you’re stuck with non-relative references for bindings to props within the same component. It would be VERY nice to have though

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 2, 2022, 6:00pm UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/3 "2022-05-02T18:00:42Z")

</div>

Curious what the syntax would be here for a dynamic reference. It’s an interesting idea, just not sure how to make it approachable (if it’s even possible on the backend).

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [May 2, 2022, 6:12pm UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/4 "2022-05-02T18:12:54Z")

</div>

Perhaps something similar to the syntax used for parameters in a Named query?

`{this.props.elements[:parentElemID].elements[:childElemID].name}`

---

<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:** [May 2, 2022, 8:15pm UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/5 "2022-05-02T20:15:20Z")

</div>

Something like

```auto
{thisItem.name}

{thisItem.parent.name}

{thisItem.element[2].name 

```

---

<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:** [May 3, 2022, 1:14am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/6 "2022-05-03T01:14:59Z")

</div>

This would be super useful for things like this in the horizontal menu:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/3/e36de262410a9ac9cb3508f218fef168c2ead961.png)

Instead, every time I add a new menu item I have to manually set the array index.  
Replacing

```auto
{this.props.items[5].label}

```

with this

```auto
{thisItem.label}

```

would be amazing

---

<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:** [May 3, 2022, 1:38am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/7 "2022-05-03T01:38:55Z")

</div>

I've created an idea:

> [@\[FEATURE\] Add relative referencing when binding to property keys in Perspective](https://forum.inductiveautomation.com/t/feature-add-relative-referencing-when-binding-to-property-keys-in-perspective/59142):
>
> This comes from this topic: It would be super handy to be able to use relative referencing for example for SVG elements, horizontal menu items, etc. when binding to these when they're inside of arrays. E.g. Currently for the bindings on each array element, we have to manually set the array index. It would be much simpler if we could replace {this.props.items[5].label} with this {thisItem.label} Vote here:

> **[Add relative referencing when binding to property keys in Perspective |...](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/add-relative-referencing-when-binding-to-property-keys-in-perspective)**
>
> This comes from this topic: https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/5?u=nminchin It would be super handy to

---

<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:** [May 3, 2022, 6:30am UTC](https://forum.inductiveautomation.com/t/svg-elements-binding-property-path-references/59101/8 "2022-05-03T06:30:26Z")

</div>

While digging around making my own modules, you can access propsconfig. `this.props.def.propconfig`  
Not sure if its easily mapped to the properties itself tho, but i guess it should, since its subscribed to it. And else you just gotta split the keys xd  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f9d98151179f2460dbba6b6f522348ba0dc13ff.png)
