指令碼

有幾種方法可以使用 JavaScript 建立和操作 SVG。本文件介紹了事件處理、互動性和使用嵌入式 SVG 內容。

可以使用 evt.preventDefault() 方法覆蓋預設的瀏覽器行為，使用 element.addEventListener(event, function, useCapture) 語法向物件新增事件偵聽器，並使用 svgElement.style.setProperty("fill-opacity", "0.0", "") 這樣的語法設定元素屬性。請注意，這三個引數都用於設定屬性。

在事件程式碼中阻止預設行為

在編寫拖放程式碼時，有時您會發現頁面上的文字在拖動時被意外選中。或者，如果您想在程式碼中使用退格鍵，您可能希望覆蓋瀏覽器在按下退格鍵時的預設行為（即返回上一頁）。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);

  this.handleEvent = (evt) => {
    switch (evt.type) {
      case "click":
        alert(this.message);
        break;
    }
  };
}

文件間指令碼：引用嵌入的 SVG

在 HTML 中使用 SVG 時，Adobe 的 SVG Viewer 3.0 會自動包含一個名為 svgDocument 的視窗屬性，該屬性指向 SVG 文件。Mozilla 的原生 SVG 實現則不是這樣；因此，在 Mozilla 中使用 window.svgDocument 是無效的。您可以改用

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，在 Adobe 的 SVG 版本 6 預覽外掛中，"parent" JS 變數是無效的。建議的解決方法是使用 "top" 而不是 "parent"。由於這是其外掛的 Beta 版本，我們可以安全地忽略這一點。

有關更多資訊和一些示例，請訪問 SVG wiki 的文件間指令碼頁面。

`setProperty` 有三個引數

函式 svgElement.style.setProperty("fill-opacity", "0.0") 在 Mozilla 中會丟擲 DOMException - SYNTAX ERR。此行為由 W3C 在 DOM Level 2 Style Specification 中指定。函式 setProperty 定義為帶有三個引數的函式。上述程式碼可以用 'svgElement.style.setProperty("fill-opacity", "0.0", "")' 替換，這是符合標準的。