JavaScript 中如何导入 SVG 文件

在现代的网页开发中，SVG（可缩放矢量图形）因其出色的可扩展性和高质量的显示效果，被广泛应用。而在 JavaScript 项目里，实现 SVG 文件的导入是一项常见需求。接下来，我们就探讨一下在 JavaScript 中导入 SVG 文件的几种方式。

1. 使用 fetch 方法

fetch API 是现代 JavaScript 中用于进行网络请求的工具，它可以用来获取 SVG 文件的内容。示例代码如下：

fetch('example.svg')
.then(response => response.text())
.then(data => {
    const svgElement = new DOMParser().parseFromString(data, 'image/svg+xml').documentElement;
    document.body.appendChild(svgElement);
  })
.catch(error => console.error('Error fetching SVG:', error));

在这段代码中，首先使用 fetch 方法发起对 SVG 文件的请求，成功获取响应后，将响应内容解析为文本格式。接着，通过 DOMParser 将文本解析为 SVG 的 DOM 元素，最后将该元素添加到页面的 body 中。

2. 动态创建 script 标签

另一种方法是通过动态创建 script 标签，并设置其 src 属性指向 SVG 文件。示例如下：

const script = document.createElement('script');
script.src = 'example.svg';
document.head.appendChild(script);

这种方式在某些场景下很方便，但需要注意的是，这种方法会将 SVG 文件当作 JavaScript 模块来处理，因此 SVG 文件需要符合 JavaScript 模块的规范。

3. 使用 import 语句（ES6 模块）

如果项目支持 ES6 模块，也可以使用 import 语句来导入 SVG 文件。在 webpack 等构建工具中配置相关的 loader，例如 svg - loader。配置完成后，就可以在 JavaScript 文件中使用如下代码导入：

import svg from 'example.svg';
const div = document.createElement('div');
div.innerHTML = svg;
document.body.appendChild(div);

这种方式更加简洁直观，同时利用了 ES6 模块的特性，使得代码结构更加清晰。

不同的导入方式适用于不同的项目场景和需求。开发者可以根据项目的具体情况，选择最适合的方法来实现 SVG 文件在 JavaScript 中的导入，从而为用户带来更丰富、更美观的视觉体验。