[jQuery] Getting JQuery to work with svg file

[aldur]

I have a svg file that is a map viewer for my website. its a php file
that returns a SVG snap shot of the world map

I've gotten zoom in and out and pan working from the control panel but
I want to embed the SVG into a page and have it load the new map as an
AJAX load.  my problem is that it can't find the jquery.js file so $
is not initialised

Any Ideas

Alpha code below
<code>
<?xml version="1.0" standalone="no"?><svg width="600px" height="480px"
version="1.1" xmlns="http://www.w3.org/2000/svg"; >
          <defs>
               <script type="text/javascript" src="jquery.js"></
script>
               <script type="text/javascript">

                var mode ='zoom';
                var mytrace= new Array();
                var x = 1135274;
                var y = 946538;
                var mag = 431.65471197426086;
                var halfheight = 240;
                var halfwidth = 300;
                var traceOn = false;
                var multiplier =0.75;
                function TestMouse(e){

                        if (window.event &amp;&amp; window.event.srcElement) {
                                evEl = window.event.srcElement;
                        } else {
                                evEl = e.target;
                        }

                        if(mode=="pan"){
                                mode="zoom";
                        }
                        if (mode == 'zoom' || mode=="unzoom"){
                                
$(evEl).load('svg.php?x='+parseInt(x+((e.clientX-halfwidth)/(1/
mag))) +"&amp;y="+ parseInt(y+((e.clientY-halfheight)/(1/mag)))
+"&amp;mode="+mode+"&amp;m="+(mag*((mode == 'zoom')?0.75:1.25)));
                        }
}
                function setzoom(evt){
                        location.href='svg.php?x='+(x)+"&amp;y="+(y)
+"&amp;mode=zoom&amp;m="+(mag*0.75);
                }
                function setunzoom(evt){
                        location.href='svg.php?x='+(x)+"&amp;y="+(y)
+"&amp;mode=unzoom&amp;m="+(mag*1.25);
                }

                function setMoveUp(evt){CallMove("Up", evt);}
                function setMoveDown(evt){CallMove("Down", evt);}
                function setMoveLeft(evt){CallMove("Left", evt);}
                function setMoveRight(evt){CallMove("Right", evt);}

                function CallMove(direction, e){
                        if (window.event &amp;&amp; window.event.srcElement) {
                                evEl = window.event.srcElement;
                        } else {
                                evEl = e.target;
                        }
                        mode="pan"

                        if(direction=="Up"){
                                y-=(50*mag);
                        }
                        if(direction=="Down"){
                                y+=(50*mag);
                        }
                        if(direction=="Left"){
                                x-=(50*mag);
                        }
                        if(direction=="Right"){
                                x+=(50*mag);
                        }
                        
location.href='svg.php?x='+x+"&amp;y="+y+"&amp;mode="+mode
+"&amp;m="+mag;
                }
</script>
          </defs>
<g id='map' onclick='TestMouse(evt)' onmousemove='trace(evt)' >
<polygon points="0,0 600,0 600,480 0,480"
style="fill:#ccffff;stroke:red;stroke-width:1"/>
<!-- map polygon goes here -->
</g>
<g onclick='setzoom(evt)'>
<polygon points="20,100, 40,100 40,120, 20,120"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="30" y1="105" x2="30" y2="116" stroke="#000" stroke-width="1"/
>
<line x1="25" y1="110" x2="35" y2="110" stroke="#000" stroke-width="1"/
>
</g>
<g onclick='setunzoom(evt)'>
<polygon points="20,124, 40,124 40,144, 20,144"
style="fill:white;stroke:#000;stroke-width:1"/>

<line x1="25" y1="134" x2="35" y2="134" stroke="#000" stroke-width="1"/
>
</g>
<g onclick='setMoveDown(evt)'>
<polygon points="20,75, 40,75 40,95, 20,95"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="27" y1="86" x2="30" y2="90" stroke="#000" stroke-width="1"/>
<line x1="33" y1="86" x2="30" y2="90" stroke="#000" stroke-width="1"/>
<line x1="30" y1="90" x2="30" y2="80" stroke="#000" stroke-width="1"/>
</g>
<g onclick='setMoveLeft(evt)'>
<polygon points="7,50 27,50 27,70 7,70"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="9" y1="60" x2="25" y2="60" stroke="#000" stroke-width="1"/>
<line x1="9" y1="60" x2="13" y2="56" stroke="#000" stroke-width="1"/>
<line x1="9" y1="60" x2="13" y2="64" stroke="#000" stroke-width="1"/>
</g>
<g onclick='setMoveRight(evt)'>
<polygon points="33,50 53,50 53,70 33,70"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="35" y1="60" x2="50" y2="60" stroke="#000" stroke-width="1"/>

<line x1="50" y1="60" x2="45" y2="56" stroke="#000" stroke-width="1"/>
<line x1="50" y1="60" x2="45" y2="64" stroke="#000" stroke-width="1"/>
</g>
<g onclick='setMoveUp(evt)'>
<polygon points="20,25, 40,25 40,45, 20,45"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="30" y1="30" x2="30" y2="40" stroke="#000" stroke-width="1"/>
<line x1="27" y1="34" x2="30" y2="30" stroke="#000" stroke-width="1"/>
<line x1="33" y1="34" x2="30" y2="30" stroke="#000" stroke-width="1"/>
</g>
</svg>
</code>