I currently have 4 SVG buttons featured in the main menu of my personal website.
https://i.stack.imgur.com/gA7En.png
/----------------------------------------------------------------------------------------------------------------------------------/
Upon clicking one button, all 4 buttons retract to the corners and reveal the corresponding section (e.g. Clicking "AboutMe" reveals the AboutMe section). https://i.stack.imgur.com/5CK9v.png
Initially, I embedded the SVG objects within an img tag:
<img class = "button active" id = "person-icon" src = "resources/main-page-icons/person-icon.svg"/>
This method was chosen because it was thought unnecessary to embed the SVG in an object or embed tag when no animation was required. However, upon deciding to add a hover effect to the SVG element, the img tag had to be changed to an object for styling and animating:
<object class = "button active" id = "person-icon" data = "resources/main-page-icons/person-icon.svg" type = "image/svg+xml"></object>
While the hover effect functioned correctly, the SVG became unclickable. It was discovered that clicks were registering on the SVG itself rather than the object it was embedded in. Even wrapping it in a div did not resolve the issue.
Question: Is there a way to animate the SVG element while also handling click events on the object element in which it is embedded?
In anticipation of the question "Why not handle the click event within the SVG element?" It was believed that allowing an SVG element's behavior to impact other elements would be illogical. For this reason, click events were managed OUTSIDE of the SVG element initially (e.g. clicking one button expands others, fades in content = undesirable). While potential solutions may exist, the original approach was deemed most appropriate at the time.
Thank you in advance for any assistance provided.