Retrieve various SVG file contents with a JavaScript/AJAX function

Question

Retrieve various SVG file contents with a JavaScript/AJAX function

I am facing an issue with loading multiple SVG files asynchronously. I have created a function to accomplish this:

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

Using the function looks like this:

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

Everything works fine with the first call, but when I try to load another SVG file, it fails. For example:

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

The error message I receive is:

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

As someone who isn't very experienced in javascript and ajax, I'm unsure why this issue is occurring.

javascript ajax svg

Answer 1

Answer №1

const fetchSVG = (fileName) => {       // <- defining a function named fetchSVG that retrieves an SVG file
  let request = new XMLHttpRequest(); // <- creating a new XMLHttpRequest object to handle the request
  ...
}

Answer 2

const fetchSVG = (fileName) => {       // <- defining a function named fetchSVG that retrieves an SVG file
  let request = new XMLHttpRequest(); // <- creating a new XMLHttpRequest object to handle the request
  ...
}

Retrieve various SVG file contents with a JavaScript/AJAX function

Answer №1

Similar questions

In JavaScript, when using the fetch function with JSON, it is possible to skip the

I desire to incorporate a subtle fading effect into the script

Unable to retrieve ajax responseText within a jquery function

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

FullCalendar Not Responding to JSON Parsing

jQuery selector for attributes with values that are higher than a specific amount using the ">" symbol or lower than a certain value using the "<" symbol

Position the vertical bar directly adjacent to the form input field

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

Is it advantageous to combine socket.io with express for seamless communication in web applications? If the answer is yes, what is the best approach to integrating

javascript increment variable malfunctioning

Incorporating React.js into HTML DOM Elements

Storing JSON data retrieved from a fetch API request in a JavaScript global variable - a beginner's guide

The Spring MVC Ajax Date Field encountered an error due to incorrect syntax in the request sent by the client

Tips for handling an InvalidSelectorException in Selenium when logging into a website

What is the best way to use Immer to update Zustand state when incorporating objects that are added through a controlled form using React-Hook-

Can you explain the process behind /^image/w+/.test(file.type)?

Leveraging ng-repeat with multiple arrays

Leveraging the import statement within lib.d.ts to enhance Intellisense functionality in Visual Studio Code

Module not discovered by nodeJS within the current directory