B
bryan.crompton
Hello!
I have a problem. I am trying to get the coordinates of the mouse
cursor when it clicks on an SVG (Scalable Vector Graphics) element.
The thing I am having trouble with, is that I can't seem to be able to
pass an event object to a function. For example, using HTML, the
following code works (this is all using firefox):
<html>
<head>
<title>event object parameter example</title>
<script type="text/javascript">
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>
When I copy this into a SVG file, as follows, its a no-go:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/
2000/svg" id="svgdoc">
<script type="text/ecmascript"><![CDATA[
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
]]>
</script>
<circle id="cir" cx="100" cy="200" r="40" fill="red"
onmousedown="showCoords(event)" />
</svg>
The javascript console says that event is undefined in the SVG
example.
Can anyone help me out?
-Bryan
P.S. Does anybody have a link to a comprehensive guide/reference of
javascript? Everything seems scattered across the web and I've only
been able to pick up bits and pieces of it.
I have a problem. I am trying to get the coordinates of the mouse
cursor when it clicks on an SVG (Scalable Vector Graphics) element.
The thing I am having trouble with, is that I can't seem to be able to
pass an event object to a function. For example, using HTML, the
following code works (this is all using firefox):
<html>
<head>
<title>event object parameter example</title>
<script type="text/javascript">
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>
When I copy this into a SVG file, as follows, its a no-go:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/
2000/svg" id="svgdoc">
<script type="text/ecmascript"><![CDATA[
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
]]>
</script>
<circle id="cir" cx="100" cy="200" r="40" fill="red"
onmousedown="showCoords(event)" />
</svg>
The javascript console says that event is undefined in the SVG
example.
Can anyone help me out?
-Bryan
P.S. Does anybody have a link to a comprehensive guide/reference of
javascript? Everything seems scattered across the web and I've only
been able to pick up bits and pieces of it.