Меню на SVG. Смена цвета при наведении мыши
есть файл меню, как сделать чтобы при закраске одного элемента желтым, все другие элементы закрашивались белым? Анимация через 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>
|