如何使用 JavaScript 与 SVG 元素交互？

使用 JavaScript 访问 SVG 元素

SVG（可缩放矢量图形）允许设计者创建可以动态操作和缩放而不会丢失的矢量图形质量。要使用 JavaScript 访问和操作 SVG 元素，您有两个主要选择：使用内置浏览器 API 或利用 Raphaël 或 jQuery SVG 等外部库。

使用内置浏览器 API

原生 JavaScript 方法涉及使用文档对象模型 (DOM) 访问 SVG elements:

1. 获取对 SVG 对象的引用：

   const svgObject = document.getElementById("mySVG");

   登录后复制

2. 通过 ID 访问各个元素：

   const deltaPath = svgObject.contentDocument.getElementById("delta");

   登录后复制

3. 操纵元素的属性：

   deltaPath.setAttribute("fill", "#00FF00");

   登录后复制

4. 添加事件监听器以响应用户交互：

   deltaPath.addEventListener("click", () => {
     alert("Hello World!");
   });

   登录后复制

注意：这由于同源，该方法要求将 SVG 加载到与 HTML 文件相同的域中

使用外部库

或者，您可以使用 Raphaël 或 jQuery SVG 等外部库：

1. 包括你的图书馆HTML:

   <script src="raphael.js"></script>

   登录后复制

2. 使用库创建和操作 SVG 元素：

   var paper = Raphael("mySVG");
   var deltaPath = paper.path("M34.074,86.094...");
   
   deltaPath.click(function() {
     alert("Hello World!");
   });

   登录后复制

比较方法

以上是如何使用 JavaScript 与 SVG 元素交互？的详细内容。更多信息请关注PHP中文网其他相关文章！