如何获取图像的宽度和高度？ ( SVG 的 getBBox() 大小返回 0 )答案

【问题标题】：How to get the width and height of an image? ( getBBox() size of SVG return 0 )如何获取图像的宽度和高度？ ( SVG 的 getBBox() 大小返回 0 )
【发布时间】：2018-09-06 16:12:43
【问题描述】：

我想获取图像的宽度和高度。我尝试使用 getBBox()，但它只返回 0 和 0，无法返回 40 和 40。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

  </head>
  <body>

    <div id="viewImg"></div>
    <script>
      var w = 200;
      var h = 200;

      var svg = d3.select('#viewImg')
      .append('svg')
      .attr('width',w )
      .attr('height',h )
      .style('border', '1px solid #000');

      svg.append('svg:image')
        .attr('xlink:href', 'https://en.js.cx/clipart/ball.svg')
        .attr('x', 20)
        .attr('y', 20)
        .attr('id','plz');

      console.log(plz.getBBox());

    </script>

  </body>
</html>

我能做些什么来纠正它？谢谢！ .

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

height 或 width 为零或未设置的图像不会被渲染： https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/SVG_Image_Tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

  </head>
  <body>

    <div id="viewImg"></div>
    <script>
      var w = 200;
      var h = 200;

      var svg = d3.select('#viewImg')
      .append('svg')
      .attr('width',w )
      .attr('height',h )
      .style('border', '1px solid #000');

      svg.append('svg:image')
        .attr('xlink:href', 'https://en.js.cx/clipart/ball.svg')
        .attr('x', 20)
        .attr('y', 20)
        .attr('height', 20)
        .attr('width', 20)
        .attr('id','plz');

      console.log(plz.getBBox());

    </script>

  </body>
</html>

所以设置height和width就可以正常工作了。

【讨论】：

【解决方案2】：

当您第一次运行它时，浏览器尚未加载图像并报告图像尺寸为 0。如果您重新加载页面，图像将被缓存并且 Chrome（至少）报告正确的图像尺寸。如果您知道您的图像尺寸将是多少，@Ruedi.Angehrn 的答案将起到作用。如果您需要使用不同的图像或事先不知道图像尺寸将是多少，则需要使用不同的技术，例如在运行 getBBox() 之前等待页面内容完全加载。

【讨论】：

我怀疑等待是否有帮助。没有 height 或 width 属性或值为 0 的 SVG 图像不会被渲染（另见 @Ruedi.Angehrn 链接）。因此，等待未渲染的内容可能需要一段时间。
@Lain 好点。只有 Chrome 会在没有 HTML/SVG 宽度和高度属性的情况下渲染图像，并且将 CSS 宽度和高度设置为“自动”或“100%”并不能解决问题。
似乎已经在这里提出并回答了这个问题：stackoverflow.com/questions/15989680/…