How to add JavaScript onClick handler to an embedded html object?

Question

I'm trying to add an onClick handler to an embedded object. The handler needs to execute a function which is in an external .js file which is linked to the current html file via <script src="....

Do I need to reference the function differently due to it being located elsewhere?

Here is the code as it currently stands (which does not work, but also does not produce any errors):

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onClick="buttonEvent('buttonClicked')"/>

Answer 1

You have to implement onclick inside the svg and link it to the external JavaScript function using javascript inside the svg. See the SVG wiki for examples.

Update: Apparently the SVG wiki is no more. No surprise that the best references I can now (quickly) find are on StackOverflow itself.

This answer describes how to implement onclick inside the svg.