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

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;