javascript - 使用 javascript/ajax 函数获取多个 SVG 文件内容

Question

我有多个要异步加载的 SVG 文件。我编写了以下可以调用的函数:

function getSVG(fileName){
  getSVG = new XMLHttpRequest();
  getSVG.open('GET','assets/svg/'+fileName+'.svg',false);
  getSVG.send();
  return getSVG.responseXML.documentElement;
}

现在我可以像这样加载内容:

var baseSVG = getSVG('base');
document.getElementById('canvas').appendChild(baseSVG);

效果很好，但是当我尝试第二次调用它时，它不起作用。例如:

var midSVG = getSVG('mid');
document.getElementById('canvas').appendChild(midSVG);

这次我收到以下错误:

'Uncaught TypeError: Property 'getSVG' of object [object object] is not a function

我不是 javascript 和 ajax 方面的专家，所以不确定这是什么意思。

Answer 1

function getSVG(fileName){       // <- create a function in the global namespace called getSVG
  var getSVG = new XMLHttpRequest(); // <- overwrite that function with a new XMLHttpRequest object
  ...
}