Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > XML > SVG doesn't raise events when embedded in HTML

Reply
Thread Tools

SVG doesn't raise events when embedded in HTML

 
 
Pretty woman
Guest
Posts: n/a
 
      12-17-2003
Hi,

I am new to web technologies, including HTML, SVG and javascript. I
followed the courses for these languages on www.w3schools.com. I have
a question about events raised by a SVG document. The SVG is embedded
in an HTML source.

I made a simple SVG file that contains a red circle with a black
outline. I also wrote a javascript that turns the outline color red.
The function is called by the onmouseover event from the circle. It
all works properly when I open the SVG seperately in IE5. However,
when I embed the SVG file in an HTML file it doesn't work properly
anymore. I open the HTML in IE5, the SVG is showed, but it doesn't
respond to events.

These are the sources I wrote:
HTML (main.html):
<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<BODY>
<object data="Circle1.svg" width="300" height="300"
type="image/svg+xml">
<embed src="Circle1.svg" width="300" height="300"
type="image/svg+xml" />

</object>
</BODY>

</HTML>
-----------------------------------------------------------------------

SVG (Circle1.svg):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="300" height="300">
<script xlink:href="Circle1Script.js" type="text/javascript" />

<circle id="circle" cx="100" cy="50" r="40" stroke="black"
stroke-width="8" fill="red" onmouseover="ChangeColor(evt)"/>
</svg>
-----------------------------------------------------------------------

JavaScript (Circle1Script.js):
var svgDoc;
var svgObjCircle;


function initsvg(evt){

var directTarget = evt.getTarget();
if( directTarget.getNodeType() != 9 ) // if not DOCUMENT_NODE
{
svgDoc = directTarget.getOwnerDocument();
}
else
{
svgDoc = directTarget;
}
svgObjCircle = svgDoc.getElementById("circle");
}

function ChangeColor(evt) {
var SVGDoc=evt.getTarget().getOwnerDocument();
svgObjCircle=SVGDoc.getElementById("circle");

svgObjCircle.setAttributeNS(null, "stroke", "red");
}
-----------------------------------------------------------------------

Does anyone know how to solve this problem?
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Raise X or Raise X()? bvdp Python 10 03-12-2012 04:08 PM
"raise (type, value, traceback)" and "raise type, value, traceback" Jack Bates Python 0 05-02-2011 05:23 PM
raise Exception or raise Exception() ernest Python 2 11-14-2010 08:14 PM
raise or not to raise [Newbie] Jacol Python 5 02-05-2007 11:46 PM
[SVG] using image-tag to integrate SVG in SVG Arne Nordmann XML 0 06-28-2004 01:16 PM



Advertisments