높이/너비가 설정되지 않은 이미지의 높이/너비 설정

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 이미지의 높이/폭을 검색하는 방법은 두 가지가 있습니다. 두 가지 방법 모두 작동하지만 나는 개인적으로 첫 번째 방법을 선호합니다.

옵션 1

SVGElement 객체의 getBBox() 방법이 사용될 수있다. x 및 y 오프셋뿐만 아니라 너비 및 높이를 검색 할 수 있습니다.

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

또는 옵션 2

,이 같은 getBoundingClientRect() 방법을 사용할 수 있습니다

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