ajax请求svg加载到img标签
时间: 2023-11-06 17:04:38 浏览: 41
可以通过以下步骤将SVG加载到img标签中:
1. 创建一个 XMLHttpRequest 对象。
2. 使用 open() 方法打开与 SVG 文件的连接。
3. 使用 responseType 属性将响应类型设置为 text。
4. 使用 send() 方法发送请求。
5. 在 onload 回调函数中,使用 DOMParser 将响应文本解析为 XML 文档对象。
6. 使用 XMLSerializer 将 SVG 文档对象转换为字符串。
7. 设置 img 标签的 src 属性为 SVG 字符串。
以下是代码示例:
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.svg', true);
xhr.responseType = 'text';
xhr.onload = function() {
if (xhr.status === 200) {
var parser = new DOMParser();
var svgDoc = parser.parseFromString(xhr.responseText, 'image/svg+xml');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svgDoc.documentElement);
var img = document.createElement('img');
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString);
document.body.appendChild(img);
}
};
xhr.send();
```
注意,由于 SVG 是一种 XML 文件格式,因此需要使用 DOMParser 和 XMLSerializer 对象进行解析和转换。此外,还需要将 SVG 字符串编码为 URI 字符串,并将其设置为 img 标签的 src 属性值。