獲取沒有設置高度/寬度的圖像的高度/寬度

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;