cannot access elements nested in <svg> via listener

[Nasr Galal]

Nested elements like `<image />` are not recognized via listener using native js, jquery, or even vuejs

 

Just looking for a way to define them to the listener

See the Pen RwrBPYV by nasr3090 (@nasr3090) on CodePen

[ZachSaucier]

Hey Nasr. This is because the element is in the <defs> section which means that it's not rendered to the page. To allow interaction events to occur the elements have to be rendered. 

[Nasr Galal]

hey zack!
so I have to use a tool like illustrator to fix this?

 

[ZachSaucier]

It depends what you mean "fix this". You can remove elements from within the <defs> by editing them in a text editor or in something like Illustrator. The only things you want in <defs> are things that shouldn't be directly rendered. It'd be good to trim your SVG of all irrelevant parts.

[Nasr Galal]

Thanks for the proper info