I would like to read in the SVG file, determine its width and height in order to scale it. At the moment, my code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "style/style.css";</style>
<meta name="svg.render.forceflash" content="false" />
<script src="svg.js" data-path="svgweb/src/"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>
<script type="text/javascript">
$(window).load(function() {
function loadContent(){
var svg = document.getElementById('myimage')
try {
SVGDoc = svg.contentDocument;
} catch (Err) {
SVGDoc = svg.getSVGDocument;
}
var root = SVGDoc.documentElement;
if (root.attributes['width'] != null) {
var width = root.attributes['width'].nodeValue;
width = width.substring(0, width.length - 2);
width = (width * 1.25);
var height = root.attributes['height'].nodeValue;
height = height.substring(0, height.length - 2);
height = (height * 1.25);
svg.width = width;
svg.height = height;
}
</script>
</head>
<body>
<div id="map">
<object id="myimage" data="images/myimage.svg" type="image/svg+xml">
</object>
</div>
</body>
</html>
This code works fine in Firefox (although you can resize it in a very short time). However, the developer tool in Chrome nags: Uncaught TypeError: cannot read the documentElement property for undefined for the string "var root = SVGDoc.documentElement;". In addition, Chrome does not resize the image.
I can not find a working solution for both browsers.
source
share