0

I want to embed a SVG within my HTML, and use Jquery to bind events on it. But I am getting unexpected results with my Jquery calls. This sometimes results in Uncaught ReferenceError: sayHello is not defined in my browser. But at other times, it simply does not correctly bind the console printing to the click event. 

<a href='#'> Click me! </a>
<embed id='board' src="tictactoe.svg" height="100%" width="100%" style="border:solid #999 1" >

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" onload="sayHello()"> 
...
</svg>

function sayHello() {
    $('a').on('click',function(e){e.preventDefault(); console.log('hello');});
}
Wex
  • 15,188
  • 10
  • 59
  • 102
kumikoda
  • 644
  • 6
  • 27
  • Erik Dahlström's answer for a similar question http://stackoverflow.com/a/3510578/783478 seems to be correct, but can someone give me a code example for the "onload=" method or binding a on load event? – kumikoda Jun 12 '12 at 22:14
  • Something worth looking into: [d3.js](http://d3js.org) – Wex Jun 12 '12 at 23:39
  • Thanks wex. d3.js does actually solve this problem quite nicely. – kumikoda Jun 13 '12 at 21:46

0 Answers0