CODEWITHSUNDEEP
javascriptfirefoxgoogle-chromesvg
labrassbandito
labrassbandito

Reputation: 535

Chrome does not resize SVG image

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.

Upvotes: 3

Views: 5386

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

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.

Upvotes: 3

Related Questions