[putrsa]

есть файл меню, как сделать чтобы при закраске одного элемента желтым, все другие элементы закрашивались белым? Анимация через set и обработка события onmouseout пробовал - при быстром движении мыши по менюшке, не всегда успевает отрабатываться событие onmouseout и получаются закрашенными несколько элементов.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="150.81416"
   height="150.97495"
   id="svg2">
    <script type="text/javascript">
    // <![CDATA[
    function gonah(evt) 
    {
//     getElementById("r1").contentDocument.getElementById("romashka").contentDocument.getElementById("l1").contentDocument.setAttribute("fill", "white");
     var target = evt.target;
     target.setAttribute("fill","yellow");
    }
   // ]]>
  </script>
   
   <defs>
 <path id="lepestok" 
 d="
      M27,0
      A27,27 0 0 1 13.5, 23.38
      L 25, 43.3
      A12,12 0 1 0 43.3, 25
      A12,12 0 1 0 50, 0
      z
      " stroke="gray" fill="white" onmouseover="gonah(evt)">
  </path>
 
 <g id="romashka">
  <use xlink:href="#lepestok" id="l1"/>
  <use xlink:href="#lepestok" id="l2" transform="rotate(60)"/>
  <use xlink:href="#lepestok" id="l3" transform="rotate(120)"/>
  <use xlink:href="#lepestok" id="l4" transform="rotate(180)"/>
  <use xlink:href="#lepestok" id="l5" transform="rotate(240)"/>
  <use xlink:href="#lepestok" id="l6" transform="rotate(300)"/>
</g>   
 </defs> 
<circle cx="75" cy="75" r="27" stroke="red" fill="#ffFFaa"/>
<use id="r1" x="75" y="75" xlink:href="#romashka" />
</svg>