Hi, I'm trying to use SMIL to make a button change colour when I mouseover it. However, since the button is made up of several shapes, it's not as easy as just adding a <set> item to one element. Thus, I've made a <g> element called "buttonPauseCtx" and listened to that mouseover/mouseout event. Unfortuantely, what seems to be happening is that when I mouse over any of the sub-element in the <g>, they all trigger a new mouseover/mouseout event and make it so the button changes colour several times while you drag the mouse over the text.
Is there anyway I can make it so <set> will treat buttonPauseCtx as one lump and only generate 1 mouseover event when I move the mouse over the <g> and 1 mouseout event when I move outside the <g>? Here's the source: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"; [ <!ENTITY ns_svg "http://www.w3.org/2000/svg";> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink";> ]> <svg version="1.1" id="buttonPause" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="110" height="110" viewBox="0 0 110 110" overflow="visible" enable-background="new 0 0 110 110" xml:space="preserve"> <!-- (C)2001 Jakob Fischer at pizzadude.dk [distribute freely] --> <font-face font-family="BubbleBoy2" units-per-em="1000" underline-position="-100" underline-thickness="50"/> <missing-glyph horiz-adv-x="500"/> <glyph unicode="e" horiz-adv-x="660" d="M621,240C624,257 622,271 613,283C604,294 591,300 574,300C557,300 542,294 528,283C513,271 504,257 501,240C494,207 476,179 447,155C418,132 388,120 356,120C323,120 297,132 278,155C260,179 254,207 261,240l26,120l120,0C472,360 534,384 591,431C648,478 684,535 698,600C712,665 700,721 662,769C625,816 574,840 509,840C442,840 380,816 323,769C266,722 231,666 218,600l-77,-360C127,173 138,117 175,70C212,23 263,0 330,0C395,0 457,24 514,71C571,118 607,175 621,240M338,600C345,633 363,661 390,684C419,708 450,720 483,720C516,720 541,708 559,684C578,661 585,633 578,600C571,567 553,539 523,515C496,492 465,480 432,480l-120,0z"/> <glyph unicode="s" horiz-adv-x="660" d="M578,600C575,583 578,569 587,558C596,546 608,540 625,540C642,540 657,546 672,558C686,569 695,583 698,600C712,665 700,721 662,769C625,816 574,840 509,840C442,840 380,816 323,769C266,722 231,666 218,600C203,533 214,477 251,430C288,383 340,360 407,360C440,360 465,348 483,324C502,301 508,273 501,240C494,207 476,179 447,155C418,132 388,120 356,120C323,120 297,132 278,155C260,179 254,207 261,240C264,257 262,271 253,283C244,294 231,300 214,300C197,300 182,294 168,283C153,271 144,257 141,240C127,173 138,117 175,70C212,23 263,0 330,0C395,0 457,24 514,71C571,118 607,175 621,240C635,305 623,362 586,409C549,456 497,480 432,480C400,480 374,492 354,515C337,540 331,568 338,600C345,633 363,661 390,684C419,708 450,720 483,720C516,720 541,708 559,684C578,661 585,633 578,600z"/> <glyph unicode="u" horiz-adv-x="660" d="M376,780C379,797 377,811 368,823C359,834 346,840 329,840C312,840 297,834 283,823C268,811 259,797 256,780l-115,-540C127,173 138,117 175,70C212,23 263,0 330,0C395,0 457,24 514,71C571,118 607,175 621,240l115,540C739,797 737,811 728,823C719,834 706,840 689,840C672,840 657,834 643,823C628,811 619,797 616,780l-115,-540C494,207 476,179 447,155C418,132 388,120 356,120C323,120 297,132 278,155C260,179 254,207 261,240z"/> <glyph unicode="a" horiz-adv-x="660" d="M218,600C215,583 218,569 227,558C236,546 248,540 265,540C282,540 297,546 312,558C326,569 335,583 338,600C345,633 363,662 392,685C419,708 450,720 483,720C515,720 541,708 561,685C579,660 585,631 578,600l-26,-120l-120,0C367,480 305,456 248,409C191,362 155,305 141,240C127,175 139,118 176,71C213,24 265,0 330,0C396,0 458,24 515,71C572,118 607,174 621,240l77,360C712,667 701,723 664,770C627,817 576,840 509,840C443,840 381,816 324,769C267,722 231,665 218,600M501,240C494,207 477,179 448,156C419,132 388,120 356,120C323,120 297,132 279,156C260,179 254,207 261,240C268,273 286,301 315,325C344,348 374,360 407,360l120,0z"/> <glyph unicode="P" horiz-adv-x="660" d="M103,61C100,44 103,30 112,19C121,7 133,1 150,1C167,1 182,7 197,19C211,30 220,44 223,61l45,212C299,251 336,240 381,240C447,240 508,263 565,310C622,357 658,414 672,480l77,360C762,905 750,962 713,1009C676,1056 625,1080 560,1080C494,1080 432,1056 375,1009C318,962 283,906 269,840M629,840l-77,-360C545,447 527,419 498,395C469,372 439,360 407,360C374,360 349,371 330,394C311,417 304,444 311,475l78,365C396,872 413,900 441,924C471,948 502,960 534,960C567,960 593,948 610,924C630,901 636,873 629,840z"/> <g> <g id="buttonPauseCtx" cursor="pointer"> <g> <path fill="none" d="M55,0c-7.423,0-14.626,1.455-21.41,4.324c-6.55,2.771-12.432,6.735-17.481,11.785 c-5.05,5.05-9.015,10.931-11.785,17.48C1.455,40.374,0,47.577,0,55s1.455,14.626,4.324,21.41c2.77,6.55,6.735,12.432,11.785,17.48 c5.049,5.051,10.931,9.016,17.481,11.785C40.374,108.545,47.577,110,55,110c7.422,0,14.626-1.455,21.408-4.324 c6.551-2.77,12.433-6.734,17.482-11.785c5.049-5.049,9.014-10.931,11.785-17.48C108.545,69.626,110,62.423,110,55 s-1.455-14.626-4.324-21.41c-2.771-6.55-6.736-12.431-11.785-17.48c-5.05-5.05-10.932-9.015-17.48-11.785 C69.626,1.455,62.422,0,55,0L55,0z M5,55C5,27.386,27.385,5,55,5c27.613,0,50,22.386,50,50l0,0l0,0c0,27.615-22.387,50-50,50 C27.385,105,5,82.615,5,55L5,55L5,55z"> <set attributeName="fill" attributeType="CSS" to="white" begin="buttonPauseCtx.click" end="buttonPauseCtx.click" restart="whenNotActive" fill="remove"/> </path> </g> <g> <path fill="#0060B6" d="M3.5,55c0,28.397,23.103,51.5,51.5,51.5s51.5-23.103,51.5-51.5S83.397,3.5,55,3.5S3.5,26.603,3.5,55z"> <set attributeName="fill" attributeType="CSS" to="#003D85" begin="buttonPauseCtx.mouseover" end="buttonPauseCtx.mouseout" fill="remove"/> </path> <path fill="black" d="M55,2c-7.154,0-14.095,1.402-20.631,4.166c-6.312,2.67-11.98,6.491-16.846,11.357S8.836,28.058,6.166,34.369 C3.402,40.905,2,47.846,2,55s1.402,14.095,4.166,20.631c2.67,6.313,6.491,11.98,11.357,16.846 c4.866,4.866,10.534,8.688,16.846,11.357C40.905,106.598,47.846,108,55,108c7.152,0,14.094-1.402,20.63-4.166 c6.312-2.67,11.979-6.491,16.847-11.357c4.866-4.865,8.688-10.533,11.357-16.846C106.598,69.095,108,62.154,108,55 s-1.402-14.095-4.166-20.631c-2.67-6.312-6.491-11.979-11.357-16.846C87.609,12.657,81.941,8.836,75.63,6.166 C69.094,3.402,62.152,2,55,2L55,2z M5,55C5,27.386,27.385,5,55,5c27.613,0,50,22.386,50,50l0,0l0,0c0,27.615-22.387,50-50,50 C27.385,105,5,82.615,5,55L5,55L5,55z"/> </g> <text transform="matrix(1 0 0 1 16.0894 67)" fill="#FFFF00" font-family="'BubbleBoy2'" font-size="23">Pause</text> </g> </g> </svg> -- View this message in context: http://www.nabble.com/Problem-using-SMIL-for-mouseover-of-%3Cg%3E-tp15250067p15250067.html Sent from the Batik - Users mailing list archive at Nabble.com. --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
