SVG Elements Mouse Clicked

[pkhoshroo]

Hello All,

I am trying to click on SVG elements to change their colors for pass/fail and add notes. Something like this thread:

Using event bubbling effect to pass click event to underneath object in perspective

Hello, Right now the perspective doesn’t support SVG click event to passes the name of the selected element. I try to have this simply by adding some transparent label underneath each element and assign of event click script for my requirement. I put the label underneath SVG because I want to use the CSS hover effect for each element. As of 8.1, we have some options called stop propagation. If I uncheck this option, the click event of SVG should pass to the underneath object but it doesn’t w…

With a responsive design, it is not possible to use the coordinates of those elements as they will be changed by screen sizes. Is there any way that I can click on each element and know which element I clicked on?

[Adriaan.leRoux]

Can you not have this SVG element be an icon or image perhaps? I have clickable icons which works fine for me

[pkhoshroo]

The thing is the SVG file is big with so many details on it and it makes it really hard to have each element as an icon.

[Steve_Laubach]

Maybe you’re talking about functionality that wasn’t in perspective when I last did custom SVG stuff in Perspective. I put an SVG in Image management and loaded it into an image control.

From there you can use the “Tint/Color” property to color it. That might not be the functionality you’re looking for because it will color the entire SVG but I thought I’d mention it in case it is helpful.

[pkhoshroo]

Thank you! Well, I actually imported the SVG as an embedded image to get the individual elements; however, I want to be able to click on each individual element using mouse click event and then change its color.

[lrose]

There is currently no way to respond to click events at the element level. You could potentially, with a whole lot of work, use the click event of the entire SVG, but that is far from trivial.

If you need to respond at this level, then you should split the SVG up into smaller components. Which depending on the number of components could become a performance issue.

One potential solution would be to have the SVG in a coordinate container set to percent mode. Then place an Icon (or other lightweight component) with an empty path effectively making it transparent on top of the areas where you need to respond to a click event. Make sure you set the coordinate container to maintain the Aspect Ratio.

Then you can respond to click events on the icon and modify the elements as needed.

[victordcq]

It is perspective right? You kinda need acces to javascript for this to make work…

I ended up making a perspective module for nader which can read out the names (ids) of the svg elements.
Allowing you to use it to trigger events.

If you are interested in some more info about the module and price, feel free to send me a private message.

[pkhoshroo]

Thank you very much for the information. I guess I have to use that transparent icon method then, the problem with that is for each element you need to create one icon.

[pkhoshroo]

Yes, it is. Thank you very much, Victor. That would really help me.

[victordcq]

Made something new for 8.1.22

Javascript inject in Perspective... have fun

Gonna try to keep this topic updated with all my cool injectings Version 8.1.22 svg clicker https://forum.inductiveautomation.com/t/new-feature-perspective-piping/49919/138?u=victordcq