Thanks again for your replies. Glad to get back to this ...
To clarify:
1) I want to be able to call svg js functions from the html js functions in the
same standards-based way in all browsers.
2) It seems like the trick is to get a reference to the 'window' that contains
the svg scripts. This code works for FF, Opera, IE9, Safari but not Chrome:
</code>
var svgdoc = null;
var svgwin = null;
...
...
var embed = document.getElementById('embed');
svgdoc = embed.getSVGDocument();
svgwin = svgdoc.defaultView;
sayHello();
...
...
function sayHello() {
svgwin.sayHello();
}
</code>
(See original post below for more context/details)
3) In my test case, I put (essentially) this code in the init() method and used
onload=init(), but I could have used a button and onclick=sayHello(). In other
words, the use of 'onload' was not central to the real issue - in my mind I
thought this would simplify the test code.
4)However, the comments about how 'onload' and browser timing was very helpful
- using onload=init() in this way is a specific use case and the input is
appreciated.
5) Setting 'onload' issues (eg, timing) aside for the moment, when I put this
in my html code:
<input type=button onclick="sayHello()" value="Say Hello!">,
I see this error in Chrome's dev tools:
Uncaught ReferenceError: svgwin is not defined
6) Also, unlike @random_transform, the button does not work with
onclick="init()" either: Using the debugger in Chrome dev tools, I find the
problem is:
svgdoc = embed.getSVGDocument() leaves svgdoc "undefined".
7) So, at this point my questions are:
A) How do you get a reference to the SVGDocument in Chrome?
B) Why does it work for some (eg, you random_transform :) ), but not me? (I am
currently testing this on Windows XP and Chrome 12.0.742.122).
Further help would be much appreciated!
PS - I still need to dig deeper into all your replies. Pardon me if I am
missing something already stated.
--- 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/
