应用错误收集

如何获得图像的宽度和高度？（SVG的getBBox（）大小返回0）

时间：2018-09-06 07:24:03

标签： javascript d3.js

我想获取图像的宽度和高度。我尝试使用 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>

我该怎么做才能纠正它？谢谢！

2 个答案:

答案 0 :(得分：2)

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，它将可以正常工作。

答案 1 :(得分：1)

首次运行时，浏览器尚未加载图像，并且报告图像尺寸为0。如果重新加载页面，则图像将被缓存，Chrome（至少）报告正确的图像尺寸。如果您知道图像的尺寸将是什么，@ Ruedi.Angehrn的答案将助您一臂之力。如果需要使用不同的图像，或者事先不知道图像的尺寸，您将需要使用其他技术，例如，在运行getBBox（）之前等待页面内容完全加载。 / p>