脚本

有几种方法可以使用 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", "")' 替换，这是符合标准的。