I have a local SVG file and want to access the individual bounding boxes of each group, rendered by the browser (and write them to a JSON file).
My html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>SVG Group Access Test</title>
</head>
<body>
<object data="output.svg" type="image/svg+xml"
id="alphasvg" width="100%" height="100%"></object>
<script>
var a = document.getElementById("alphasvg");
// It's important to add a load event listener to the object,
// as it will load the svg doc asynchronously
a.addEventListener("load", function() {
// Get the inner DOM of output.svg
var svgDoc = a.contentDocument;
// Check if the SVG document is loaded
if (svgDoc) {
// Get all <g> elements within the SVG
var groups = svgDoc.querySelectorAll('g');
// Iterate over each <g> element
groups.forEach((group, index) => {
// Log group details to console
console.log(`Group ${index + 1}:`, group);
// Optionally, get the bounding box of the group
var bbox = group.getBBox();
console.log(`Bounding box for Group ${index + 1}: x=${bbox.x}, y=${bbox.y}, width=${bbox.width}, height=${bbox.height}`);
});
} else {
console.error("Could not access the SVG document.");
}
}, false);
</script>
</body>
</html>
this html file and output.svg are both in same directory and I open the html with a browser. Despite this, I can not access the SVG (svgDoc is null). I think this has something to do with access policies as described here
I am new to this and want to prevent running a server. I want to call this html file from python as command instead.