このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
スクリプト処理
JavaScript を使用して SVG を作成および操作するには、いくつかの方法があります。この記事では、イベント処理、対話機能、および埋め込み SVG コンテンツの操作について記述しています。
ブラウザーの既定の動作をevt.preventDefault() メソッドで上書きしたり、イベントリスナーをelement.addEventListener(event, function, useCapture) という構文でオブジェクトに追加したり、要素のプロパティをsvgElement.style.setProperty("fill-opacity", "0.0", "") などで設定することが可能です。 3 つの引数がすべてプロパティを設定していることに注意してください。
イベントコードの既定の挙動を防ぐ
ドラッグ＆ドロップのコードを書いていると、ページのテキストをドラッグ中に誤って付随的に選択してしまうことがあります。もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻るという、ブラウザーの既定の振る舞いを上書きしたくなるでしょう。このようなことは、evt.preventDefault() メソッドで実現することができます。
オブジェクトにeventListener を使う
addEventListener() やremoveEventListener() は、対話的な SVG を書くときとても有効です。これらのメソッドの第 2 引数として、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 = (evt) => { switch (evt.type) { case "click": alert(this.message); break; } };}文書間のスクリプト処理 - 埋め込み SVG の参照
HTML 内で SVG を使用する場合、Adobe の SVG Viewer 3.0 は自動的にsvgDocument という SVG 文書を指すウィンドウのプロパティを含みます。これは、Mozilla のネイティブ SVG 実装には当てはまりません。したがって、window.svgDocument を使用しても Mozilla ではうまくいきません。その代わりに、
const svgDoc = document.embeds["name_of_svg"].getSVGDocument();を使用して埋め込まれた SVG 文書の参照を取得することができます。
SVG 文書を表すDocument にアクセスするには、以下のようにHTMLIFrameElement.contentDocument （文書が<iframe> で表現されている場合）またはHTMLObjectElement.contentDocument （文書が<object> 要素で表現されている場合）に注目するとよいでしょう。
const svgDoc = document.getElementById("iframe_element").contentDocument;さらに、<iframe>,<embed>,<object> の各要素はgetSVGDocument() というメソッドを提供しており、要素の埋め込み SVG を表すXMLDocument または要素が SVG 文書を表さない場合にはnull を返します。
また、document.getElementById("svg_elem_name").getSVGDocument() を用いても同じ結果を得ることができます。
メモ:SVGDocument インターフェイスに言及しているドキュメントを見かけることがあります。 SVG 2 より前は、 SVG 文書はこのインターフェイスを使って表現されていました。しかし、現在では SVG 文書は代わりにXMLDocument インターフェイスを用いて表現されています。
文書をまたがるスクリプト処理 - JavaScript 関数の呼び出し
HTML 文書に埋め込まれた SVG ファイルから HTML ファイルの中にある JavaScript 関数を呼び出すとき、その関数を参照するにはparent.functionName() を使うべきです。Adobe SVG viewer プラグインはfunctionName() の利用を許可していますが、このようなことを行うには適していません。
メモ:SVG wiki によると、 JavaScript の変数"parent" は Adobe の SVG バージョン 6 プレビュープラグインでは壊れているとのことです。回避策として、"parent"の代わりに"top"を使用することが提案されています。このプラグインはベータ版なので、おそらく無視しても大丈夫でしょう。
更なる情報といくつかの例はSVG wiki inter-document scripting page で見つかります。
setProperty には 3 つの引数がある
svgElement.style.setProperty("fill-opacity", "0.0") と関数を呼び出すと、 Mozilla では DOMException がSYNTAX ERR で発生します。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。setProperty 関数は 3 つの引数を持つ関数として定義されています。上記のものは、'svgElement.style.setProperty("fill-opacity", "0.0", "")' で置き換えることができ、これが標準に準拠しています。
