マウス・イベントに加えて、キーボード・イベントもスクリプト可能です。キーボード・イベント・スクリプトをテキスト・エレメントを操作する機能と結びつけると、SVG クリエータはダイナミックなインタラクションを作成することができます。

次の実例のSVG画像の上でマウスをクリックして、キーボードから入力してみてください。

前のレッスンと同様にこのスクリプトでも、SVGエレメントと連動したイベント・ハンドラを利用しています。ここではキープレス・イベントを使いますが、これを取り扱うためには、key_pressという関数で定義します。

function key_press (event)
{
  // Get the character-code of the key that was pressed.
  var key = event.getCharCode();
  // Get string equivalent of input character-code.
  var input_text = String.fromCharCode(key);
  // Determine which SVG text element to use for
  // showing the entered key.
  var elem_idx = next_letter + 1;
  var elem_name = 'letter' + elem_idx;
  var svgobj = svgdoc.getElementById(elem_name);
  var svgstyle = svgobj.getStyle();
  // To change the element's text, we set the data
  // of its first child node.
  svgobj.getFirstChild().setData (input_text);
  ...
}

key_press関数の本体は、テキストやアニメーションのレッスンですでに取り上げたテクニックを利用しています。キーが押されるたびに、この関数がSVG画像内の一つのテキスト・エレメントのDataを設定し、これがトリガーとなって、アニメーション・シーケンスがテキスト・エレメントを徐々にバックグラウンドへとフェードさせます。

次のレッスン：ダイナミックな挿入