Question

我想在SVG文件中读取，确定其宽度和高度以便缩放它。目前，我的代码如下：

<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>

此代码在Firefox中运行良好（尽管可以在很短的时间内看到调整大小）。但是，Chrome中的开发人员工具nags：Uncaught TypeError：无法读取“var root = SVGDoc.documentElement;”行中未定义的属性“documentElement”。此外，Chrome不会调整图片大小。

我无法为这两种浏览器找到有效的解决方案。

Answer 1

首先，getSVGDocument()是方法，而不是属性。你必须调用它：

SVGDoc = svg.getSVGDocument();

其次，SVGDoc本身应该在某处声明：

var SVGDoc;

第三，Chrome的same origin policy does not like file:协议。您必须提供SVG图像，而不是从本地文件中读取它们。

Chrome不会调整SVG图像的大小

1 个答案: