0

さまざまなユーザー アクション (マウス オーバー、クリックなど) に反応するインタラクティブな SVG を作成しようとしています。私は Java Batik を使用していますが、XML で問題にアプローチする方法を説明していただければ十分です。

クリック機能は私にとってはうまく機能します。問題は、ホバリング (マウス オーバー アクション) にあります。私のコードは次のようになります。

svgRoot.setAttributeNS(null, "onmouseover", "evt.target.setAttribute('opacity', '0.5');");
svgRoot.setAttributeNS(null, "onmouseout", "evt.target.setAttribute('opacity', '1');");

svgRoot は、.svg ファイル全体のルート ノードです。他のすべての要素がそれに追加されます。私のsvqにカーソルを合わせると、現在の要素だけが透明になります（たとえば、テキスト要素または現在マウスカーソルを置いている長方形など）。ただし、svg全体を透明（すべての要素）にしたいと思います。このアクションをルート要素に追加することでこれが行われると思っていましたが、そうではありません。

また、作成したすべての svg にリンクされている「script.js」という外部 ECMAscript ファイルもあるため、このスクリプトでこれをプログラムすることもできますが、方法がわかりません。

ヒントをありがとう。

4

1 に答える 1

1

onmouseoverおよびonmouseoutトリガーを持つ円があるとします。

<circle id="mycircle" cx="100" cy="100" r="50" fill="blue" stroke="red" stroke-width="3" onmouseover="myOpacity(0.5)" onmouseout="myOpacity(1.0)"/>

そして、純粋な JS の myOpacity() 関数:-

function myOpacity(op_value) 
{
  myCircle = document.getElementById('mycircle');
  myCircle.setAttribute('opacity', op_value);
}

onmousedown注: 試行してonmouseupトリガーすることもできます。

于 2013-06-13T18:14:31.907 に答える