I've made this little flag icon.
http://www.trjps.co.uk/image_store_old/estonia_flag.svg
When you mouseover, it lights up. When you click down it goes brighter (this is done by making an overlay gradient visible), and it moves a bit too.
Everything is controlled by a set of mouseon's, mouseouts's etc in the group tag
A problem occurs when the mouse is presses then moved. The second the pointer hits the overlay, a mouseup event occurs. The pointer has never left the group as the overlay is in the same group.
I even tried putting all the gradient stops in the group but without any change.
Am I overlooking something? Any help or hint is most appreciated.
Gaz
Perhaps it's a browser bug. A sudden mouse block of an element shouldn't trigger a mouseup if that element is a child of the event element and event propagation is allowed.
You can work around this by manipulating fill-opacity instead of visibility:
//remove .setAttribute('visiblity', ...)
onmousedown="getElementById('flash').setAttribute('fill-opacity',1)"
onmouseup="getElementById('flash').setAttribute('fill-opacity',0)"
And your #flash element...
<!--Removed visibility="hidden" added fill-opacity="1" and removed fill-opacity:0 from styles -->
<path
style="fill:url(#radialGradient3033);fill-rule:nonzero;stroke:#ffffff;stroke-width:1.2529794;stroke-opacity:0"
d="M 423.65326,432.06998 C 405.51096,436.96285 390.19952,445.00107 368.27826,447.66373 362.06308,452.02659 356.97847,456.99773 353.34076,462.22623 L 353.34076,496.06998 C 359.10138,502.25487 368.35017,506.24285 379.40326,507.60123 401.52711,502.8051 417.56662,493.26432 440.49701,490.66373 445.27742,487.01892 449.28524,482.98308 452.37201,478.78873 L 452.37201,443.19498 C 445.96886,436.83241 435.72653,432.94392 423.65326,432.06998 z"
id="flash"
inkscape:connector-curvature="0"
fill-opacity="1"
/>