如何使用 AJAX 加载 SVG 文件内容？答案

【问题标题】：How to load SVG file contents with AJAX?如何使用 AJAX 加载 SVG 文件内容？
【发布时间】：2020-05-04 18:51:11
【问题描述】：

我正在尝试使用 jQuery AJAX 访问 SVG 文件的内容，但在 Chrome 中不断收到相同的错误。

JavaScript

$.get("my.svg", function(data){
  print(data)
})

控制台输出

[Error] jquery.min.js:4 XMLHttpRequest cannot load file:'///Users/james.jensen/Desktop/helloworld/my.svg'. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我确实从here 复制并粘贴了代码并对其进行了更改以适应我的情况，所以我不确定为什么我的代码会以这种方式出现故障。

提前致谢

【问题讨论】：

它必须是一个 http 调用。您不能使用 file:// 协议通过 ajax 加载文件/数据。
jQuery appending to AJAX loaded SVG problem的可能重复
@abhishekkhandait 运行上述 JavaScript 的 HTML 文件与 my.svg 位于同一文件夹中，因此您可以看到我使用了 $.get("my.svg"...)。我相信这可以作为 HTTP 调用？
尝试在网址中添加“/”。 $.get("/my.svg"...)
@abhishekkhandait 我已经试过了。 Chrome 将 URL 视为file:///my.svg。

标签： javascript jquery ajax google-chrome get

【解决方案1】：

事实证明，这个问题实际上与 Chrome 相关。我在 Safari 上运行了相同的代码，它运行良好。我研究了使我能够在 Chrome 上运行相同代码的解决方案，发现我必须在本地运行服务器。

【讨论】：

【解决方案2】：

$.get('/my.svg', function(svg) {
   console.log(svg);
}, 'text');

【讨论】：

我仍然遇到同样的错误，除了使用 URL /my.svg 只会生成路径 file:///my.svg，这显然不是文件的位置。
你能在google chromes Inspect sources中找到源文件my.svg吗？
是的，它确实出现在来源中。