Hello All,
I am trying to click on SVG elements to change their colors for pass/fail and add notes. Something like this thread:
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?
Can you not have this SVG element be an icon or image perhaps? I have clickable icons which works fine for me
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.
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.
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.
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.
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.
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.
Yes, it is. Thank you very much, Victor. That would really help me.