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

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

javascript d3.js

Javascript 如何获得图像的宽度和高度？（SVG的getBBox（）大小返回0）,javascript,d3.js,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=

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


JS-Bin
var w=200；
var h=200；
var svg=d3。选择（“#viewImg”）
.append（'svg'）
.attr（'宽度'，w）
.attr（'高度'，h）
.style（'border'，'1px solid#000'）；
append（'svg:image'）
.attr（'xlink:href'，'https://en.js.cx/clipart/ball.svg')
.attr（'x'，20）
.attr（'y'，20）
.attr（'id'，'plz'）；
log（plz.getBBox（））；

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

高度

或宽度为零或未设置的图像不会被渲染：



JS-Bin
var w=200；
var h=200；
var svg=d3。选择（“#viewImg”）
.append（'svg'）
.attr（'宽度'，w）
.attr（'高度'，h）
.style（'border'，'1px solid#000'）；
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'）；
log（plz.getBBox（））；
首次运行时，浏览器尚未加载图像，并将图像尺寸报告为0。如果重新加载页面，图像将被缓存，Chrome（至少）会报告正确的图像尺寸。如果你知道你的影像维度将会是什么，@Ruedi.Angehrn的回答会起作用。如果您需要使用不同的图像或事先不知道图像尺寸，则需要使用不同的技术，例如，在运行getBBox（）之前等待页面内容完全加载。
我怀疑等待是否有帮助。没有高度
或宽度
属性或值为零的SVG图像不会被渲染（另请参见@Ruedi.Angehrn链接）。所以，等待一些无法渲染的内容可能需要一段时间。@Lain说得对。只有Chrome渲染的图像没有宽度和高度的HTML/SVG属性，将CSS宽度和高度设置为“自动”或“100%”并不能解决此问题。这里似乎已经询问并回答了这一问题：