Chrome does not resize SVG image
Question
I would like to read in a SVG file, determine its width and height in order to scale it. At the moment, my code looks 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(){
/* SVG */
var svg = document.getElementById('myimage')
/* Adapt size of SVG */
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">
<!--[if IE]>
<object id="myimage" src="images/myimage.svg" classid="image/svg+xml">
<![endif]-->
<!--[if !IE]>-->
<object id="myimage" data="images/myimage.svg" type="image/svg+xml">
<!--<![endif]-->
</object>
</div>
</body>
</html>
This code works fine in Firefox (although one can see for a very short time the resizing). However, the developer tool within Chrome nags: Uncaught TypeError: Cannot read property 'documentElement' of undefined for the line "var root = SVGDoc.documentElement;". In addition, Chrome does not resize the image.
I can't find a working solution for both browsers.
1 answers
solution1
3 ACCPTED 2010-11-09 23:22:57
First, getSVGDocument() is a method, not a property. You have to call it:
SVGDoc = svg.getSVGDocument();
Second, SVGDoc itself should be declared somewhere:
var SVGDoc;
Third, Chrome's same origin policy does not like the file: protocol. You'll have to serve your SVG images instead of reading them from local files.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.