I'm trying to draw a button using jQuery SVG, the button is a filled rect and the text is placed on top of the rect. Rect and text are grouped and I want to control the mouseover/mouseout events. The problem is: mouseover/mouseout events are triggered separately for every element of the group. Is it possible to make a single event handler for entire group?
Here is an example:
gClear = svg.group();
btClear = svg.rect(gClear, 10, 10, 100, h-20, 5 ,5, attrs);
txtClear = svg.text(gClear, 35, 30, "Clear", {fontFamily: "Verdana",
fontWeight: "bold", fontSize: "16px"});
$(gClear, svg.root()).bind("mouseover", function()
{
$(btClear).animate({svgFill: '#adf'}, 100);
}).bind("mouseout", function()
{
$(btClear).animate({svgFill: '#fff'}, 100);
})
When I move the mouse inside the rect the events mouseover/mouseout are triggered. Can I make "text" events transparent or can I have a single event handler for the group?
