Ok, I fiddled some more and got it to work if I put init() in the handler for a button, so it got called after everything was fully rendered, rather than in <body> . Still got an error with init() called from JQuery $(document).ready, so that's probably a dead end.
So I guess it is indeed a timing issue with Chrome. Just for fun I tried to call init() (as a function defined in the html) from onload in the svg file...it doesn't find an init function. --- In [email protected], "random_transform" <kingfysher@...> wrote: > > I fiddled with this, without joy. > To eliminate possible initialization timing issues, I moved init() to the > onclick event of a button that I added. (IRL I'd probably instead have used > JQuery's .ready function to make sure everything was initialized before > calling my own script...haven't heard of any issues combing Jquery with SVG's > DOM). > I get "Uncaught TypeError: [object DomWindow] has no method 'sayHello', in > Chrome's Developer Tools Scripts Panel. > > I get the same error if I embed test.svg with an <object> tag or with <embed>. > > FWIW, it works fine in Safari 5.0.5, so it's not a general Webkit issue. > > I suppose this is a test case of something more functional, and you don't > really need to use a .svg file to store a javascript library that's actually > called in response to events that originate from non-svg HTML elements? > > > > --- In [email protected], "gmcaulee" <gmcauley@> wrote: > > > > > > I would like to call a script function in a SVG document that is embedded > > in an HTML document. The following HTML and SVG files work in Firefox, > > Opera, IE9 but not Chrome (have not tested in Safari). > > > > My questions are: > > > > 1) How can I get this to work in Chrome? > > 2) Is there a general way to do this that will work for all browsers? > > 3) If the answer to 2) is no, what are my options? > > > > TIA > > > > *** The HTML: *** > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > > "http://www.w3.org/TR/html4/loose.dtd";> > > <html> > > <head> > > <title>Test</title> > > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> > > > > <script type="text/javascript"> > > <!-- > > > > var svgdoc = null; > > var svgwin = null; > > > > function init() { > > > > var embed = document.getElementById('embed'); > > svgdoc = embed.getSVGDocument(); > > if (svgdoc && svgdoc.defaultView) > > svgwin = svgdoc.defaultView; > > sayHello(); > > > > } > > > > function sayHello() { > > svgwin.sayHello(); > > } > > > > //--> > > </script> > > </head> > > <body onload="init()"> > > <embed id="embed" src="test.svg" width="300" height="200" > > type="image/svg+xml" /> > > </body> > > </html> > > > > *** The SVG: *** > > > > <?xml version="1.0"?> > > <svg xmlns="http://www.w3.org/2000/svg"; > > xmlns:xlink="http://www.w3.org/1999/xlink"; width="200px" height="200"> > > <script type="text/javascript"><![CDATA[ > > > > function sayHello() { > > alert("Hello from test.svg!!!"); > > } > > > > // ]]></script> > > <defs> > > <rect id="bg_rect" x="0" y="0" width="200" height="200" > > fill="#ccffff"/> > > <path id="path1" d="M -10 5 L 40 5 L 40 50 L -10 50 L -10 5" > > style="fill:#000000;"/> > > </defs> > > <use x="0" y="0" xlink:href="#bg_rect"/> > > <g> > > <rect id="rect1" x="140" y="48" width="231" height="213" > > transform="matrix(0.352113,0,0,0.352113,-34.1549,0)" fill="rgb(0,143,0)"/> > > <polygon id="shape1" points="457,124 526,96 457,68 420,17 > > 383,68 314,96 383,124 420,175 457,124" fill="rgb(158,0,76)" > > transform="matrix(0.352113,0,0,0.352113,-10.564,15.1411)"/> > > <polygon points="524,253 598,295 590,389 503,463 424,337 > > 428,233" transform="matrix(0.352113,0,0,0.352113,-34.1549,0)" > > fill="rgb(228,14,242)"/> > > <polygon id="shape3" points="392,380 346,450 243,467 160,419 > > 160,341 243,293 346,310" > > transform="matrix(0.352113,0,0,0.352113,-34.1549,0)" fill="rgb(251,0,55)"/> > > > > </g> > > <animate attributeName="fill-opacity" attributeType="CSS" from="1.0" > > to="0.0" begin="0" dur="5s" fill="freeze" repeatCount="indefinite" > > xlink:href="#shape1"/> > > <animateMotion repeatCount="indefinite" dur="5s" rotate="0" > > fill="freeze" xlink:href="#shape3"> > > <mpath xlink:href="#path1"/> > > </animateMotion> > > </svg> > > > ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
