HOME > 上級編 > エクステンション > ウェブ-JavaScript

エクステンション

ウェブ-JavaScript

エクステンションの基本については・・・

このエクステンションでは、webブラウザ上で、あるオブジェクトを操作（クリック、マウスオーバーなど）した時に、他のオブジェクトの属性（スタイルなど）を変更するJavaScriptを、svgファイルに埋め込みます。

※webブラウザによっては、svgファイルを標準で表示できないものがあります。Internet Explorerで表示するには、別途SVG Viewerをダウンロードする必要があります。

属性の設定

webブラウザ上で、あるオブジェクトを操作（クリック、マウスオーバーなど）した時に、他のオブジェクトを指定の属性に変更します。

基本的な使いかた

例として、下記の顔のうち、左側の顔をクリックすると、右側の顔が線画（白色黒フチ）に変化するように設定したいと思います。

  1. メニューバーの[エクステンション]メニューより、[ウェブ]-[Javascript]-[属性の設定]で、ダイアログを開き、下記の項目を設定します。

    ①[設定する属性]
    属性を、属性間にスペースを空けて入力します。今回は白色黒フチにしたいので、「fill stroke stroke-width」の3つを入力します。
    ②[いつ設定しますか？]
    プルダウンメニューより項目を選択します。今回は「クリックした時」にします。
    ③[設定する値]
    [設定する属性]の欄で設定した属性の値を順にスペースを空けて入力します。今回はフィルを白、ストロークを黒、線幅を1pxにしたいので、「#ffffff　#000000　1px」と入力します。
  2. 上記の設定が終われば、[Shift]キーを伴って「操作するオブジェクト」、「操作によって属性変更するオブジェクト」の順に選択後、[適用]を押します。
  3. svgファイルを表示できるブラウザで開きます。（今回はFirefoxを使用しました）
    左側の顔をクリックすると、右側の顔が線画になります。
    実際のsvgファイルを開く（動作見本）
3つ以上のオブジェクトに適用する場合

上記の説明は2つのオブジェクトに適用する場合のものでしたが、3つ以上のオブジェクトにも適用するすることができます。
その場合は、上記の項目に加えて一番下の[設定元と設定先]の設定が重要になります。

例として、下記の4つの顔を[Shift]キーを伴って左から順に選択したものを使って比較してみます。

[選択した全てが最後の一つに属性を設定]を選択した場合

1から3番目までのどの顔をクリックしても、4番目の顔の属性を変更します。

実際のsvgファイルを開く（動作見本）

[最初の選択がその他全てを設定]を選択した場合

1番目の顔をクリックすると、1番目以外の全ての顔の属性を変更します。

実際のsvgファイルを開く（動作見本）

属性の伝送

webブラウザ上で、あるオブジェクトを操作（クリック、マウスオーバーなど）した時に、他のオブジェクトに指定の属性を伝送します。
つまり、あるオブジェクトをクリックすると、別のオブジェクトが、クリックしたオブジェクトの色に塗り替えられるというようなことです。

メニューバーの[エクステンション]メニューより、[ウェブ]-[Javascript]-[属性の伝送]を選択するとダイアログが開きます。
設定内容は上記[属性の設定]と基本的に同じです。
ただし、[属性の設定]内の[③設定する値]については、こちらでは「一つ目に選択するオブジェクトの属性の値」になります。


試しに一つ設定してみます。

  1. 下記の4つの顔を左から順に選択します。
  2. [属性の伝送]ダイアログで下記のように設定しました。これで、1番目に選択した顔をクリックすると、他の3つの顔のフィルの色が1番目のフィルの色に変わるはずです。
  3. [適用]します。
    svgファイルを表示できるブラウザで開いて、1番目の顔をクリックすると下記のようになります。（ブラウザはFirefoxを使用しました）

実際のsvgファイルを開く（動作見本）

[このイベントのプレビューコードとの互換性]について


この項目は、もともと先に定義されているアクションがあった場合、今回適用するアクションと、どちらを先に実行するかを設定します。


例として・・・

下記の2つの四角に、[属性の設定]を適用後、[属性の伝送]を適用してみます。

  1. まずは[属性の設定]を適用します。
    2つの四角を、 → の順に選択し、をクリックすると、のスタイル設定がに変わるという設定を適用します。
    具体的には、[属性の設定]ダイアログで下記のように設定し、適用しました。

    この時点でsvgファイルをブラウザで開き、をクリックすると、下記のようになります。
  2. 続けて、今度は[属性の伝送]を適用します。
    をクリックすると、のフィルがのフィルの色（つまり）に変わるという設定を適用します。
    具体的には、ダイアログで下記のような設定を適用しました。
    このとき、[このイベントのプレビューコードとの互換性]で[後で実行]を選択しておきます。
  3. この状態でsvgファイルを開き、をクリックすると、は、始めの[属性の設定]が実行された後、引き続き[属性の伝送]が実行され、結果下記のようになります。

    実際のsvgファイルを開く（動作見本）

XMLエディターで内容を確認する

適用した内容は、[XMLエディター]で確認できます。

[設定元と設定先]を、

  • [最初の選択がその他全てを設定]に設定した場合は、最初に選択したオブジェクトに「onclick」などの属性が追加されます。
  • [選択した全てが最後の一つに属性を設定]を設定した場合は、最後に選択したオブジェクト以外の全てのオブジェクトに「onclick」などの属性が追加されます。

HOMEへ 　このページのトップへ

inserted by FC2 system