I am attempting to develop a self-contained SVG document that automatically adjusts its size and centers itself when loaded in a web browser. It's important to note that this is not referring to embedding an SVG within an HTML document.
Below is the structure of the document:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.2"
width="600"
height="400"
docname="web-business-card.svg">
The inner dimensions of the SVG document are set to 600x400, and here is the included script:
<script type="text/javascript>
var fitObject = function() {
var svg = document.documentElement;
var zoom = Math.min((window.innerWidth/600),(window.innerHeight/400));
var left = parseInt(((window.innerWidth-(600*zoom))/2)/zoom);
var top = parseInt(((window.innerHeight-(400*zoom))/2)/zoom);
// dynamically set style attributes
svg.style.zoom = zoom;
svg.style.left = left+'px';
svg.style.top = top+'px';
}
document.addEventListener("DOMContentLoaded", fitObject);
window.onresize = fitObject;
</script>
This script works well in the Chromium browser during testing but experiences issues in other browsers. I'm seeking guidance on understanding the problem and finding a solution. Can anyone assist me with this?