# Configuring SVG element events from the proper editor

**URL:** <https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [May 15, 2024, 7:36am UTC](https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403 "2024-05-15T07:36:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pyrak](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@Pyrak](https://forum.inductiveautomation.com/u/Pyrak)\
**Post date:** [May 15, 2024, 7:36am UTC](https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403/1 "2024-05-15T07:36:21Z")

</div>

Hello everyone,  
I have created an svg but after embedding it to perspective, the individual components are present in the editor panel but not clickable in the view section. I want to add events to specific elements. Is there a way I can add the the events from the property editor section. An example, can I add a pop screen to the red element onclick from the property editor.

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

---

<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 15, 2024, 7:48am UTC](https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403/2 "2024-05-15T07:48:13Z")

</div>

Not natively no, but you can inject some java scripts  
i got an example here

> [@New Feature: Perspective Piping](https://forum.inductiveautomation.com/t/new-feature-perspective-piping/49919/138):
>
> welp... i just had to try it out didnt it crazy_face Required version 8.1.22 Behold! JS INJECTED SVG CLICKER [jsInjectedSvgClicker.zip](https://forum.inductiveautomation.com/uploads/short-url/yDwMpbCRuyjgMnIYAO9s4YWkTIz.zip) (3.6 KB) edit: I made the value of the binding become the name it writes to in the view.custom props Be sure to set the custom prop back to null after handling your event so you can trigger the onchange events on the prop wink It should only detect things inside this view. Haven't fully tested it though.

---

<div class="post-metadata">

**Author:** ![Pyrak](https://avatars.discourse-cdn.com/v4/letter/p/e0b2c6/32.png) [@Pyrak](https://forum.inductiveautomation.com/u/Pyrak)\
**Post date:** [May 15, 2024, 11:18am UTC](https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403/3 "2024-05-15T11:18:17Z")

</div>

Thanks a lot @victordcq. One more thing, could you give some context on how to use the file the designs.

---

<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 15, 2024, 1:44pm UTC](https://forum.inductiveautomation.com/t/configuring-svg-element-events-from-the-proper-editor/90403/4 "2024-05-15T13:44:45Z")

</div>

> [@Pyrak](#):
>
> use the file the designs.

im not sure what you are asking here.

the file proviced is a view that can be imported. it has the markdown, which containt the injected script. and some example svg and text fields that show how it works  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/4832230204b3355d18ea31a9a18cf227b5aad331.png)

the value in de markdown expression binding (key)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e06e731de1a83abfdeac5b9d9e04532bcf8e8113.png)  
is the root.custom propty name i sends the data too  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/410061e8486c94d273b3c579d014f2b2b1701e00.png)

the value that i retured on click is the first **name** that is find going up the svg element  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6e8f05cc3d56580ecaeb3ea711ac1bd9e3abd7e3.png)

you could use the root.custom property its onchange event as "onclick" event
