You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by cmckay <ca...@couchware.ca> on 2008/02/03 03:58:56 UTC
Problem using SMIL for mouseover of
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: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org