高さ/幅が設定されていない画像の高さ/幅を取得する

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> 

Iをこの画像の上に画像を追加すると、オリジナルの高さと幅を取得できないため、読み込んでいる画像のサイズを変更して、元の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の層内の画像の高さと幅を取得しようとしているが、これらはアクセスできません、彼らは両方ともコンソールに

元のsvgイメージの高さと幅にアクセスするにはどうすれば読み込み中の新しいイメージに適用できますか？

おかげ

スティーブン

Answer 1

このような状況でSVG画像の高さ/幅を取得するための2つの方法があります。どちらの方法も機能しますが、私は個人的に最初の方が好きです。

オプション1

SVGElementオブジェクトのgetBBox()方法を用いることができます。これにより、xとyのオフセットだけでなく、幅と高さも取得できます。

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

代わりにオプション2

、あなたがこのようなgetBoundingClientRect()メソッドを使用することができます

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