logo标签列表

Chrome无法调整SVG图像大小

javascriptfirefoxgoogle-chromesvg
3
我想读取一个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中的开发者工具中会出现错误提示：Uncaught TypeError: Cannot read property 'documentElement' of undefined，该错误与“var root = SVGDoc.documentElement;”这一行有关。此外，Chrome不会调整图像大小。

我找不到适用于两个浏览器的有效解决方案。

1个回答
3
首先，getSVGDocument() 是一个方法，而不是属性。你需要 调用 它：
SVGDoc = svg.getSVGDocument();

其次，SVGDoc 本身应该在某个地方声明：

var SVGDoc;

其次，Chrome的同源策略 不支持 file: 协议。您需要通过服务器提供SVG图像，而不是从本地文件中读取。

非常感谢您的更正。然而，Chrome 仍然报错：Uncaught TypeError: Cannot read property 'rootElement' of undefined。 - labrassbandito
1
@labrassbandito，这看起来很像Chromium Bug #29296。你的Chrome浏览器是否是最新版本？ - Frédéric Hamidi
我的版本是7.0.517.41（62167）Ubuntu 10.10。此外，我读到错误消息仅在通过file://加载SVG时本地存在。这似乎是真的，因为代码在线上按预期工作。奇怪。不幸的是，我错过了宣称这一事实的网站。尽管如此，我仍然面临调整大小的问题。只有在Firefox中，SVG才会自动调整大小。 - labrassbandito
2
SVGDocument 继承了 Document 接口，该接口具有 documentElement 属性。请参见 http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGDocument。 因此，调用 documentElement 没有问题。 - Erik Dahlström
@Erik，谢谢，我之前不知道这个。同源策略也适用于documentElement，这就是我们首先进入catch块的原因。回答已更新。 - Frédéric Hamidi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接