JavaScript Fetch API 怎么处理接口返回的 SVG 数据-js教程-PHP中文网

使用 fetch 获取 svg 数据时，应调用 .text() 方法将响应体解析为字符串，随后通过 domparser 将其转换为 dom 对象以便操作。若需直接渲染到页面，可将原始 svg 字符串插入

 的 innerhtml，或通过 url.createobjecturl 创建 blob url 设置给  标签。此方法能保留 svg 的可编辑性并避免跨域图片限制。
如何将 SVG 文本解析为可操作的 DOM 节点
调用 response.text() 获取 SVG 源码后，利用 DOMParser 实例的 parseFromString 方法，指定 MIME 类型为 image/svg+xml，即可得到标准的 XML DOM 树。解析后的节点可直接用于查询属性、修改样式或提取子元素，适用于需要在客户端动态调整 SVG 内容的场景。

const response = await fetch('/api/icon.svg');
const svgText = await response.text();

const parser = new DOMParser();
const doc = parser.parseFromString(svgText, 'image/svg+xml');

const path = doc.querySelector('path');
if (path) {
  path.setAttribute('fill', 'red');
}
上述代码中，fetch 发起请求，response.text() 返回 Promise 解析出的字符串。DOMParser 接收该字符串和类型参数，返回 Document 对象。通过 querySelector 找到具体图形元素并修改其属性，最终实现了对 SVG 内部结构的操控。
如何直接将 SVG 字符串渲染到 HTML 页面
若无需进一步操作 DOM，仅希望展示图像，可将 SVG 字符串直接赋值给容器的 innerHTML。这种方式让浏览器原生解析 SVG 标记，支持内联 CSS 和 JavaScript 事件绑定，适合图标库或动态生成的矢量图形。另一种方式是将字符串包装为 Blob 对象，生成临时 URL 赋给  的 src，适用于需要保持上下文隔离的场景。

											
												
												
													JavaScript 测试模式
													使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编
												
												下载
												
											
										

// 方法一：直接插入 HTML
container.innerHTML = svgText;

// 方法二：使用 Blob URL
const blob = new Blob([svgText], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
imgElement.src = url;
第一种方法中，innerHTML 直接解析字符串中的标签，使其成为文档的一部分，可被 CSS 选择器直接命中。第二种方法创建了一个内存中的 Blob 对象，并通过 URL.createObjectURL 生成指向该对象的 URL， 标签像加载普通图片一样加载它，但保留了 SVG 的特性。注意在使用完 Blob URL 后应调用 URL.revokeObjectURL 释放内存。
SVG 数据中包含外部引用时会发生什么
当 SVG 字符串内包含 <script></script> 或外部资源链接时，直接插入 innerHTML 可能因安全策略被浏览器阻止执行或加载。此时使用 DOMParser 解析虽能获得节点，但若尝试重新序列化回字符串再插入，可能丢失部分结构。建议在服务端确保 SVG 为自包含格式，或在客户端移除潜在的危险节点后再渲染。