topic Re: Manipulating SVG file in G Web Development Software

Manipulating SVG file

irfanabid — Mon, 31 Jul 2023 09:02:16 GMT

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:

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).

Re: Manipulating SVG file

MilanR — Sat, 05 Aug 2023 23:43:17 GMT

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)

Re: Manipulating SVG file

irfanabid — Sun, 06 Aug 2023 00:22:34 GMT

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