FW: SVG scripting beyond SVG itself?

Dear SVG developers,

 

I have encountered a cross-browser issue when scripting svg. Please refer to
the forwarded email.

Thanks!!

 

Gang Su

 

 

  _____  

From: Gang Su [mailto:sugang@umich.edu] 
Sent: Thursday, June 21, 2007 8:39 PM
To: batik-users@xmlgraphics.apache.org
Subject: SVG scripting beyond SVG itself?

 

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">

<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">

 

 

<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");

}

Received on Friday, 22 June 2007 14:49:40 UTC