1

この小さな旗のアイコンを作りました。

http://www.trjps.co.uk/image_store_old/estonia_flag.svg

マウスオーバーすると点灯します。クリックすると明るくなり (これは、オーバーレイ グラデーションを表示することによって行われます)、少し動きます。

すべては、グループタグのマウスオン、マウスアウトなどのセットによって制御されます

マウスを押してから動かすと、問題が発生します。ポインターがオーバーレイに当たった瞬間に、mouseup イベントが発生します。オーバーレイが同じグループにあるため、ポインタがグループを離れたことはありません。

グループにすべてのグラデーションストップを入れてみましたが、変更はありませんでした。

私は何かを見落としていますか？どんな助けやヒントも大歓迎です。

ガズ

4

1 に答える 1

0

おそらくブラウザのバグです。その要素が event 要素の子であり、イベントの伝播が許可されている場合、その要素の突然のマウス ブロックは、mouseup をトリガーするべきではありません。

fill-opacityの代わりに操作することで、これを回避できますvisibility。

   //remove  .setAttribute('visiblity', ...)
   onmousedown="getElementById('flash').setAttribute('fill-opacity',1)"
   onmouseup="getElementById('flash').setAttribute('fill-opacity',0)"

そしてあなたの#flash要素...

<!--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"
 />
于 2012-07-17T05:06:33.323 に答える