P
Pretty woman
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");
}
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");
}