Script

画像に対話機能や動きを加える。

書き方

画像とスクリプトを分離する書き方

<script type="text/ecmascript" xlink:href="スクリプトファイルURL" />

type="text/ecmascript"

スクリプトのタイプ。

xlink:href="画像データURL"

スクリプトファイルの場所をURLで指定する。

使用例

右下の丸及び四角をクリックすると、同じ形をしたほかの図形と共に色が変わります。

イベントリスナーを使用することにより、SVG上のスクリプトに関する記述は最小限にしています。

svgman_script_01.js

var c_sw_on = "on";
var c_sw_off= "off";
var g_wc_sw = c_sw_off;
var g_cs_sw = c_sw_off;
var g_wc_style ="";
var g_cs_style ="";

addEventListener("load", svgonload, false)


function svgonload(evt) {
  wc_sw=document.getElementById("wc");
  wc_sw.addEventListener("click", wc_click, false);
  cs_sw=document.getElementById("cs");
  cs_sw.addEventListener("click", cs_click, false);

  g_wc_style=wc_sw.getAttribute("style");
  g_cs_style=cs_sw.getAttribute("style");

}

function wc_click(evt) {
  var w_fill ="";
  var w_wc ="";
  if (g_wc_sw == c_sw_on)
  {
    g_wc_sw = c_sw_off;
    w_fill = g_wc_style;
  }
  else
  {
    g_wc_sw = c_sw_on;
    w_fill = "fill:blue";
  }

  w_wc = evt.target;
  w_wc.setAttribute ("style",w_fill);
}

function cs_click(evt) {
  var w_fill ="";
  var w_cs ="";
  if (g_cs_sw == c_sw_on)
  {
    g_cs_sw = c_sw_off;
    w_fill = g_cs_style;
  }
  else
  {
    g_cs_sw = c_sw_on;
    w_fill = "fill:blue";
  }

  var w_cs = evt.target;
  w_cs.setAttribute ("style",w_fill);
}