使用 Ajax 问题调用 SVG Sprites答案

【问题标题】：Calling SVG Sprites with Ajax issue使用 Ajax 问题调用 SVG Sprites
【发布时间】：2021-03-31 15:20:05
【问题描述】：

我正在尝试在单个 HTML 页面中调用不同的外部 SVG 精灵。如果我坚持使用一个，一切都会完美运行，只要我想调用不同的 SVG 精灵，我最终只会加载一个。所以基本上，它只加载一个精灵而忽略其他精灵。我在这里的语法中遗漏了什么吗？

我正在使用以下 ajax 代码 // 我是新手，所以我确定我在这里犯了一个可怕的错误 :)

<script>
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
</script>

然后在 HTML 我正在使用这个

<svg class="sprite1">
  <use xlink:href="#icon-name"></use>
</svg>

【问题讨论】：

我可能不是最好的来源，但问题可能是它以块的形式加载它们在 onload 函数中尝试e.ondata()，看看你是否可以获得所有这些。
@Scurgery 你想怎么写？ ajax.onload = function(e.ondata()) {

标签： javascript jquery ajax svg

【解决方案1】：

很抱歉为此使用了答案，但代码有点长。

var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
  e.ondata = (chunk) => {
    console.log(chunk);
  }
  var div = document.createElement("div");
  div.innerHTML = ajax.responseText;
  document.body.insertBefore(div, document.body.childNodes[0]);
}

这只是一个飞行的想法，但可能会奏效。

【讨论】：

谢谢，伙计！不幸的是，我试过了，它显示了同样的东西，加载 sprite 1 元素但忽略了其他两个 sprite。
对不起兄弟:( ...另一个想法...你确定你可以使用open同时加载多个东西吗？我从来没有这样用过。
谢谢，伙计，真的不知道！我不是这里的专家 :D 希望社区能帮助解决这个问题。