# Click action on SVG shape only but not entire component **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 11, 2025, 11:29am UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362 "2025-07-11T11:29:15Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![colm.crowley](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@colm.crowley](https://forum.inductiveautomation.com/u/colm.crowley)\ **Post date:** [July 11, 2025, 11:29am UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/1 "2025-07-11T11:29:15Z")
How can I restrict the click action to the svg shape only and not its entire rectangle? Thanks Colm ![bend](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/8414d1bcc3d06389e8b0f2ff53b27df5177ca4f5.png) ---
**Author:** ![fakcior](https://avatars.discourse-cdn.com/v4/letter/f/ee59a6/32.png) [@fakcior](https://forum.inductiveautomation.com/u/fakcior)\ **Post date:** [July 11, 2025, 11:51am UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/2 "2025-07-11T11:51:07Z")
You could add condition in click event to check if click coordinates are within shape boundaries. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [July 11, 2025, 12:04pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/3 "2025-07-11T12:04:31Z")
The easiest is use an overlay of some kind, like a label, then use the click event for that component. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 11, 2025, 12:21pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/4 "2025-07-11T12:21:40Z")
I think the OP only wants a response when the green area is clicked. ---
**Author:** ![colm.crowley](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@colm.crowley](https://forum.inductiveautomation.com/u/colm.crowley)\ **Post date:** [July 11, 2025, 12:43pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/5 "2025-07-11T12:43:38Z")
yes, that is correct. thanks ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [July 11, 2025, 12:46pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/6 "2025-07-11T12:46:42Z")
> [@Custom button styling and click events with CSS/SVG](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107/4): > > I did make a module too, but i also made a simpler js injected version. If i remember correctly, it catches the most specific name property of the svg elements and writes it to a view.custom prop. where you can handle your "onclick" event in the onchange of this property. Not the id property as asked, so you will have to add all of those, limitation by perspective sadly. Victor made a JS injection that will let you know the name of the SVG element that was clicked, might work here. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 11, 2025, 12:53pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/7 "2025-07-11T12:53:19Z")
yes should work for this ---
**Author:** ![colm.crowley](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@colm.crowley](https://forum.inductiveautomation.com/u/colm.crowley)\ **Post date:** [July 14, 2025, 9:20am UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/8 "2025-07-14T09:20:42Z")
Thanks a million. This worked. I changed it to a mousehover event and then checked the custom prop value in my click event. I also tried to use it to enable/disable the tooltip, which it did, but this didn't function as hoped. I guess the tooltip doesn't update once it has been triggered. I may use a tooltip style popup instead for these objects. Cheers. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 14, 2025, 2:28pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/9 "2025-07-14T14:28:31Z")
iirc there is a component function to open the tooltip, you could use this probaly to open after updating it ```python requestTooltip() ``` > **[Perspective Component Methods | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/scripting-in-perspective/perspective-component-methods#requesting-or-removing-tooltips)** > > A component method is a function that is defined on a component object. For example, this is how we would call a component method defined on the component object self: ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [July 14, 2025, 7:30pm UTC](https://forum.inductiveautomation.com/t/click-action-on-svg-shape-only-but-not-entire-component/108362/10 "2025-07-14T19:30:57Z")
Your solution is great. Hopefully the new drawing tools will also allow us to add hitboxes to SVG sub elements to support this level of SVG integration natively (wink wink). I'll be surprised if we have something like that in 8.3 at launch but I could see that becoming a thing down the road. Along the lines of their "first make it possible and then make it easy" strategy.