SVG（Scalable Vector Graphics）文件是一种基于 XML 的图像格式，它使用向量图形来描述图像，可以无限缩放而不会失真。在 Web 开发中，我们通常使用 <img> 元素来显示图片，但是如何在 <img> 元素中访问并操作 SVG 文件的内容呢？本文将介绍两种常用的方法。
方法一：使用 data URI
data URI 是一种允许在 URL 中嵌入小型数据的方案，我们可以使用它来直接将 SVG 文件的内容作为 <img> 元素的 src 属性值。具体步骤如下：
- 将 SVG 文件转换为 Base64 编码的字符串
- 将字符串拼接成 data URI 格式：data:image/svg+xml;base64,${base64String}
- 将 data URI 赋值给
<img>元素的 src 属性
---- ---- --- ---- ------------------------------------------------------------------------------------------------ -------- -------
这种方法的优点是简单易行，不需要额外的 JavaScript 代码。但是需要注意的是，由于 SVG 文件本身就是文本格式，因此使用 data URI 会使得 HTML 页面变得臃肿，降低性能。
方法二：使用 XMLHttpRequest 和 DOMParser
XMLHttpRequest 是 JavaScript 的核心技术之一，可以向服务器发送请求并获取数据，我们可以使用它来获取 SVG 文件的内容。DOMParser 则是将 XML 或 HTML 字符串解析为 DOM 对象的 API，我们可以使用它将字符串转换为可操作的 DOM 对象。具体步骤如下：
- 使用 XMLHttpRequest 获取 SVG 文件的内容
- 将返回的字符串使用 DOMParser 解析为 DOM 对象
- 获取
<svg>元素，并将其添加到一个新创建的<div>元素中 - 将包含 SVG 内容的
<div>元素插入到 DOM 树中，并设置其样式
---- ---- ---
---- -------------------------
--------
----- --- - --- -----------------
--------------- ---------------
---------- - -- -- -
----- ------ - --- ------------
----- ------ - ---------------------------------------- -----------------
----- ------- - --------------------------------------
----- --------- - -----------------------------------------
-------------------------------
--
-----------
---------这种方法的优点是不会使得 HTML 页面变得臃肿，且可以对 SVG 文件进行更加灵活的操作。但是需要注意的是，由于此方法需要使用 JavaScript 进行异步加载和处理，因此需要额外的编码工作。
综合来说，如果只是简单地显示 SVG 图片，则可以使用 data URI；如果需要对 SVG 图片进行更复杂的操作，则需要使用 XMLHttpRequest 和 DOMParser。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30664