Manipulating SVG file

[irfanabid]

Hi folks,

Probably you have any idea about our current issue on updating the svg file using javascript.

WORKS:

- Modify HTML source in gweb </>

  Adding the following texts:

<div id="svg1">
       <object type="image/svg+xml" data="support/picture.svg" width="100%" height="100%">
</object></div>

Then in JS:

const svgObject = document.querySelector("#svg1 object");

const svgDoc = svgObject.contentDocument;   //This give XMLDocument object.

DOES NOT WORK:

I used html container, create object element. The svg file is loaded.

However, I cannot access the contentDocument.

Object element creation:

const createSVG = function (container, svgPath) {
const svgObject = document.createElement('object');
svgObject.type = "image/svg+xml";
svgObject.data = svgPath;

svgObject.width = '100%';
svgObject.height = '100%';
container.appendChild(svgObject);
return svgObject;
};

Access document content as DOM file:

const svgDoc = svgObject.contentDocument;  //This give HTMLDocument instead of XML document.

Any idea on how to resolve this as I need to modify the SVG during realtime (update sensor data based on its location in the image).

[MilanR · Accepted solution]

There are a lot of ways to approach this problem. I created an example that does the following approach:

• Use the HTML Placeholder container to insert the svg content directly into the page (instead of using the <object> tag)
• With the elements directly in the page I can manipulate them like other elements in a page. So in the svg I added id attributes, etc. that I can find with the JavaScript querySelector
• In this example I used CSS styles to manipulate the SVG (rotate the svg element with id ball)

[irfanabid]

Thanks a lot Milan. Really helpful. I will look into it.