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')"/>

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')"/>

• javascript
• svg
• embedded-object

• Can't you just call the script inside the svg onclick of the main container? – mplungjan Commented Jul 1, 2010 at 9:04
• possible duplicate of Making an svg image object clickable with onclick, avoiding absolute positioning – jtbandes Commented Aug 10, 2014 at 23:00

4 Answers 4

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.

Use either javascript binding (Mario Menger answered that already).

If you can't or won't use the binding, you can use what xil3 answered with one modification:

Use an empty anchor tag <a href="javascript:someFunc()"></a> as the click consumer. Set it's z-index and position/size so it positioned over the svg object (for cross-browser compatibility).

If you wanted to call a method from the embedded object you could do something like this, Have the following as your embedsrc.html:

    <img src="svg/button.svg" width="95" height="53" 
    onClick="window.parent.buttonEvent('buttonClicked')"/>

and then have this in your main html:

    <embed src="embedsrc.html" width="95" height="53"> </embed>

    <script type='text/javascript'>
    function buttonEvent(input){alert(input);}
    </script>

Onclick should all be lowercase.

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onclick="alert('hello!');"/>