K
klestes
Hi all -
My apologies for what is probably a newbie post. I'm trying to grok
using javascript with SVG, and have come to learn that anything
involving a <script> tag may or may not work.
My current code looks like:
<?xml version="1.0" ?>
<html xlmns="http://www.w3.org/1999/xhtml">
<title>A title here would be nice</title>
<body>
<h1>Do you see me?</h1>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript" src="test.js" />
<defs>
<g id="friendly" style="fill: none; stroke: black;" >
<rect x="0" y="0" width="30" height="30"
onmouseover="turn_blue(evt)"
/>
</g>
<g id="enemy" style="stroke: red; fill: none" >
<circle cx="10" cy="10" r="10"
onmouseover="turn_red(evt)"
/>
</g>
</defs>
<circle cx="50" cy="50" r="15"
style = "stroke: blue; stroke-width: 3; fill: none"
onmouseover="turn_black(evt)"
/>
<use xlink:href="#friendly" x="0" y="0"
/>
<use xlink:href="#enemy" x="100" y="100" />
</svg>
</body>
</html>
the file test.js:
/*
* File: test.js
*
*/
var old_style = "fill: none; stroke: black; stroke-width: 3";
function turn_red(evt)
{
var c = evt.target;
c.setAttribute("style", "fill: red");
}
function turn_blue(evt)
{
var c = evt.target;
c.setAttribute("style", "stroke: blue; fill: blue");
}
function some_f_here()
{
var a = 1;
}
function turn_black(evt)
{
var obj = evt.target;
obj.setAttribute("style", "fill: black");
}
// end of file.
Maybe I'm just blowing some part of the magic incantations required...I
have observed that, when the <script> block is within the <svg> block
it works, otherwise de nada. I am using the latest, greatest Firefox,
1.5.0.6.
thanks !
K. L.
My apologies for what is probably a newbie post. I'm trying to grok
using javascript with SVG, and have come to learn that anything
involving a <script> tag may or may not work.
My current code looks like:
<?xml version="1.0" ?>
<html xlmns="http://www.w3.org/1999/xhtml">
<title>A title here would be nice</title>
<body>
<h1>Do you see me?</h1>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript" src="test.js" />
<defs>
<g id="friendly" style="fill: none; stroke: black;" >
<rect x="0" y="0" width="30" height="30"
onmouseover="turn_blue(evt)"
/>
</g>
<g id="enemy" style="stroke: red; fill: none" >
<circle cx="10" cy="10" r="10"
onmouseover="turn_red(evt)"
/>
</g>
</defs>
<circle cx="50" cy="50" r="15"
style = "stroke: blue; stroke-width: 3; fill: none"
onmouseover="turn_black(evt)"
/>
<use xlink:href="#friendly" x="0" y="0"
/>
<use xlink:href="#enemy" x="100" y="100" />
</svg>
</body>
</html>
the file test.js:
/*
* File: test.js
*
*/
var old_style = "fill: none; stroke: black; stroke-width: 3";
function turn_red(evt)
{
var c = evt.target;
c.setAttribute("style", "fill: red");
}
function turn_blue(evt)
{
var c = evt.target;
c.setAttribute("style", "stroke: blue; fill: blue");
}
function some_f_here()
{
var a = 1;
}
function turn_black(evt)
{
var obj = evt.target;
obj.setAttribute("style", "fill: black");
}
// end of file.
Maybe I'm just blowing some part of the magic incantations required...I
have observed that, when the <script> block is within the <svg> block
it works, otherwise de nada. I am using the latest, greatest Firefox,
1.5.0.6.
thanks !
K. L.
