获取没有设置高度/宽度的图像的高度/宽度

Question

我正在处理从 swf 转换器创建的 HTML 页面。生成的 HTML 使用 SVG 图像来创建与 swf 布局匹配的元素。

然后我尝试在这些 svg 图像之上加载图像，但不幸的是 svg 图像没有设置高度和宽度，所以它们看起来像这样：

<div class="wlby_5">
    <!-- Start of symbol: element3 -->
    <img src="FlashTemplate_assets/svgblock_2.svg" class="wlby_4"></img>
    <!-- End of symbol: element3 -->
  </div>

当我在此图像上附加图像时，我无法获取原始高度和宽度来调整我正在加载的图像的大小，因此它会调整大小以匹配原始 svg 图像。这就是我在新图像中加载的方式：

var imgWidth = $('div[class~="' + obj.name+ '"]').find('img').width()
var imgHeight = $('div[class~="' + obj.name+ '"]').find('img').height();


console.log("width of image", imgWidth);
console.log("height of image", imgHeight);
console.log( $('div[class~="' + obj.name+ '"]').find('img') );

$('div[class~="' + obj.name+ '"]').find('img').attr('src', obj.value);
$('div[class~="' + obj.name+ '"]').find('img').attr('width', imgWidth);
$('div[class~="' + obj.name+ '"]').find('img').attr('height', imgHeight);

所以我试图在 div 层中获取图像的高度和宽度，但是这些无法访问，在控制台中它们都设置为 0。

如何访问原始 svg 图像的高度和宽度，以便将其应用于正在加载的新图像？

谢谢

斯蒂芬

Answer 1

在这些情况下，有两种方法可以检索 SVG 图像的高度/宽度。两种方法都有效，但我个人更喜欢第一种。

选项 1

可以使用 SVGElement 对象的getBBox() 方法。这可以检索 x 和 y 偏移量，以及宽度和高度。

$('img').getBBox().width  
$('img').getBBox().height

选项 2

或者，您可以像这样使用getBoundingClientRect() 方法：

$('img').getBoundingClientRect().width;