Javascript + SVG

Hi leute,
hoffe ihr könnt mir weiter helfen. ist echt wichtig und selbst find ich den fehler leider nicht.

hoffe es ist okay, wenn ich den quellcode zum teil hier reinsetzte und dann die kurze erklärung von mir.

PHP:

<script type="text/javascript">
 

      function followMouse(evt) {
        var doc=getSVGDoc(evt.getTarget()); 
        var temp=doc.getElementById("hint");
        temp.setAttribute("transform","translate("+(evt.getClientX()+15)+","+(evt.getClientY()+30)+")");  
      }
      function switchhint(evt,aimId,vis) {
        var doc=getSVGDoc(evt.getTarget()); 
        var temp=doc.getElementById(aimId);
        temp.setAttribute("visibility",vis);  
        temp=doc.getElementById("hint");
        temp.setAttribute("visibility",vis);  
       
      }
      function getSVGDoc(node) { 
        if(node.getNodeType()==9)
          return node;
        else
          return node.getOwnerDocument();
      }
      
      function changeVisibility(evt,targetID){
          var doc=getSVGDoc(evt.getTarget());
          if (doc.getElementById(targetID).getAttribute('visibility')=='visible'){
            doc.getElementById(targetID).setAttribute('visibility','invisible');
          } else {
            doc.getElementById(targetID).setAttribute('visibility','visible');
          };
        }
 </script>    

  <g>
   <text style="font-size:16px; fill:black;">
     <tspan id="Raum22Text" x="200" y="52" style="font- weight:bold; fill:black;"> 22 
     </tspan>
   </text> 

  <g id="Raum22" transform="translate(1)" class="metalVert"
      onmousemove="switchhint(evt,'hintText','visible')" 
      onmouseout="switchhint(evt,'hintText','hidden')">
        <rect id="Raum22" x="191" y="15" height="60" width="40" opacity=".6" style="fill:#ffffff; stroke:#0b0ec3; stroke-width:1px;">
        <animate id="Raum22" attributeName="fill" attributeType="svg" begin="mouseover" dur="mouseover" from="#fbc877" to="#ffffff" fill="freeze"/>
        <animate id="Raum22" attributeName="fill" attributeType="svg" begin="mouseout"dur="mouseout" from="#ffffff" to="#fbc877" fill="freeze"/>
       </rect>
  </g>
<!--  Text im Kasten --> 
  <g id="hint" visibility="hidden" style="fontfamily:helvetica;fill:darkblue;font-size:16;stroke:none;font-weight:bold">
    <text text-anchor="middle" visibility="visible">
        <tspan id="hintText" x="70" y="265" visibility="hidden" tyle="fill:black;">
               Test Text
       </tspan>
     </text>     
   </g>

<!-- 
  <use xlink:href="#Raum22" onclick="changeVisibility(evt,'hintText');"/>  
-->






So hoffe es ist noch einigermaßen übersichtlich.
der script bewirkt im brinzipt das bei dem Raumplan der Raum22 die Farbe wechselt, wenn ich mit der mouse drüber fahre und der Test Text (id="hintText") dargestellt wird. sobald ich mit der mouse den raum verlasse verschwindet der text auch wieder und die ursprüngliche farbe erscheint.
jetzt möchte ich zudem, wenn ich auf den Raum einmal auf den Raum klicke,das dann bei mouseoute, der text (id="hintText") erhalten bleibt, und erst beim zweiten klicken auf den Raum der text wieder verschwindet.

mit: <use xlink:href="#Raum22" onclick="changeVisibility(evt,'hintText');"/>
funktioniert es zwar aber immer nur ein effekt. d.h. entweder mouseover-mouseout effekt, oder die click funktion!!!
es funzt mit dem klick aber nur, wenn das use-elemten am ende des ganzen steht. (siehe oben, als kommentar)

könnt ihr mir weiter helfen???BITTE