From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/scripting/index.html | 58 +++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 files/ja/web/svg/scripting/index.html (limited to 'files/ja/web/svg/scripting') diff --git a/files/ja/web/svg/scripting/index.html b/files/ja/web/svg/scripting/index.html new file mode 100644 index 0000000000..91830c66d4 --- /dev/null +++ b/files/ja/web/svg/scripting/index.html @@ -0,0 +1,58 @@ +--- +title: スクリプティング +slug: Web/SVG/Scripting +tags: + - SVG +translation_of: Web/SVG/Scripting +--- +

+

+

イベントコードの初期挙動を防ぐ

+

ドラッグ・アンド・ドロップのコードを書いていると、時々、ページのテキストをドラッグ中に誤って付随的に選択されてしまうことがあります。 +もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻る、ブラウザの既定の振る舞いを上書きしたいと望むでしょう。ブラウザが前のページに戻るのを防ぎたいと望むでしょう。 +このような場合、evt.preventDefault() メソッドを使うことが出来ます。 +

+

オブジェクトに eventListeners を使う

+

対話的な SVG を書くとき、addEventListener() と removeEventListener() メソッドはとても便利です。これらのメソッドの二番目のパラメータとして、handleEvent インタフェースを実装するオブジェクトを渡すことができます。 +

+
function myRect(x,y,w,h,message){
+  this.message=message
+
+  this.rect=document.createElementNS("http://www.w3.org/2000/svg","rect")
+  this.rect.setAttributeNS(null,"x",x)
+  this.rect.setAttributeNS(null,"y",y)
+  this.rect.setAttributeNS(null,"width",w)
+  this.rect.setAttributeNS(null,"height",h)
+  document.documentElement.appendChild(this.rect)
+
+  this.rect.addEventListener("click",this,false)
+
+  this.handleEvent= function(evt){
+    switch (evt.type){
+     case "click":
+      alert(this.message)
+      break;
+     }
+    }
+   }
+
+

文書間のスクリプティング - 埋め込み SVG の参照

+

HTML 内で SVG を使う場合、Adobe SVG Viewer 3.0 は自動的に SVG 文書を示す svgDocument<code> と呼ばれるウィンドウプロパティをインクルードします。これは Mozilla のネイティヴ実装には当てはまりません。従って Mozilla では <code>window.svgDocument は動きません。代わりに埋め込まれた SVG ドキュメントを参照するために var svgDoc=document.embeds{{ mediawiki.external('\"name_of_svg\"') }}.getSVGDocument(); を代替使用することができます。 +

また、document.getElementById("svg_elem_name").getSVGDocument() を使用して同じ結果を得ることもできます。 +

+

文書間のスクリプティング - JavaScript 関数の呼びだし

+

HTML ドキュメントに埋め込まれた SVG ファイルから HTML ファイルの中にある JavaScript 関数を呼び出すとき、その関数を参照するには parent.functionname() を使うべきです。Adobe SVG Viewer プラグインは functionname() の利用を許可していますが、このようなことを行うには適していません。 +

+
+

注意: SVG wiki によると Adobe の SVG バージョン 6 プレビュープラグインでは "parent" JavaScript 変数は壊れているとのことです。提案された次善策は parent の代わりに top を使うことです。 +

+
+

更なる情報といくつかの例を SVG wiki inter-document scripting page で見付けることが出来ます。 +

+

setProperty は3つのパラメタを持ちます

+

Mozilla では svgElement.style.setProperty("fill-opacity", "0.0") 関数は SYNTAX ERR という DOMException を投げます。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。setProperty 関数は 3 つのパラメタを持つ関数として定義されています。上記は 'svgElement.style.setProperty("fill-opacity", "0.0", "")' で置き換えられます。こちらの方がより標準に一致しています。 +

+

リンク

+

SVG ホームページ +

SVG wiki on Scripting and Programming +

{{ languages( { "en": "en/SVG/Scripting" } ) }} -- cgit v1.2.3-54-g00ecf