Thanks, I was just curious about whether it's possible to mix SVG with html.
The scope of functions seem messed up. The in-line SVG works for internet explorer but not for firefox too. Gang _____ From: Mark Fortner [mailto:[EMAIL PROTECTED] Sent: Thursday, June 21, 2007 11:49 PM To: [email protected] Subject: Re: SVG scripting beyond SVG itself? I don't mix SVG and HTML. I usually just write SVG and either embed the script within the SVG document or link it. Usually I don't put a div in there to display text, I simply use a rectangle with some text. You can put this together with Inkscape, and then add the script to show/hide the text. This works in both IE and Firefox. Hope this helps, Mark On 6/21/07, Gang Su <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> > wrote: Dear Users, Is it possible to let SVG script beyond SVG itself, but on the document that embedded the SVG? I have tried a little example. It works on IE with Adobe SVG viewer but it doesn't work on Firefox. The idea is to use SVG elements (such as rectangle) to trigger events, which in turn modify other elements in the document. I used prototype. There are three files, the html, the svg and the javascript. The purpose is when user clicks the rectangle in the svg, the div element in html changes its content. To try this, you need prototype.js. Mr Mark Fortner, I read the tutorial in your email. Have you tried things like this before? Thanks. Gang Html: ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd";> <html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" type="text/html; charset=utf-8"> </meta> <script type="text/javascript" src="./src/prototype.js"></script> <script type="text/javascript" src="./script.js"></script> <link type="text/css" rel="stylesheet" href="./themes/default.css"></link> <link type="text/css" rel="stylesheet" href="./style.css"></link> <!-- Define cursor in the style, so that when mouse is on the cursor is changed--> <title>HTML TEST </title> </head> <body onload="init()"> <form> <input type="Button" value="Button1" onclick="doAction();" id="Button1" name="Button3" class="button"/> <input type="Button" value="Button2" id="Button2" name="Button2" class="button"/> <div id="status1" class="information"> Status Bar 1 </div> <div id="status2" class="information"> This is junk... </div> <embed width="1000" height="800" src="svg.svg" name="svgpicture" type="image/svg+xml"></embed> </form> </body> </html> ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- ----------- SVG <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd> http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd";> <svg xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink"; id="body" width="450" height="500" xml:space="preserve" viewBox="0 0 450 500"> <title>TEST SVG</title> <script xlink:href="./prototype.js" type="text/javascript"/> <script xlink:href="script.js" type="text/javascript"/> <rect x="50" y="50" width="200" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" onclick="show();"/> </svg> JAVASCRIPT: only the show() function works for the svg //This is merely a test.. //for IE, the event object is a global variable, window.event; //for others, DOM event object is passed down as the first argument inexplicitly. function init() { Event.observe('Button2', 'click', doAction2); $("status1").innerHTML = "Document Initialized."; } function show() { $("status1").innerHTML = "Clicked SVG."; <-- ----------------------------This line works for ie+adobe svg viewer, but not for firefox } function doAction(event) { if(!event)event = window.event; $("status1").innerHTML = "Clicked the Button" + event.srcElement.id; } function doAction2(evt) { var offsetX; offsetX = Event.pointerX(evt) - parseInt($("status1").getStyle('top'));//The CSS is defined in px...need to remove it. $("status1").innerHTML = "Clicked the Button2" + Event.pointerX(evt) + " " + $("status1").getStyle('top') + " " + Event.element(evt).id + " " + offsetX; $("status2").innerHTML = parseInt("2001px"); }
