JQuery find and set height of loaded SVG

Trying to find and set height of loaded svg.

         $('#case_1_btn').one('click', function(){
         $('#image_placeholder').load('cases/case_1/images/case_1_1.svg');
         var svg = $('#image_placeholder').find('svg')[0];
         alert(svg);
         svg.setAttribute('height', '50%')       
});

The alert states 'undefined'. So that needs to be fixed.

And then setting height of the svg returns an error in console:

Case Studies - Racism and Bias.html:56 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')
    at HTMLDivElement.<anonymous> (Case Studies - Racism and Bias.html:56:8)
    at HTMLDivElement.i (jquery-3.7.1.min.js:2:37034)
    at HTMLDivElement.dispatch (jquery-3.7.1.min.js:2:40035)
    at v.handle (jquery-3.7.1.min.js:2:38006)

The svg itself has no set height and width in the svg code. Just Viewbox.

HTML

<body>
<div id="container">
  <div id="main_title_container">
    <div id="main_title_txt">UWA Optometry - Case Studies - Racism and Bias</div>
  </div>
    
  <div id="side_menu">
    <div id="case_btn_container">
      <div class="case_btn" id="case_1_btn">
        <div class="case_btn_txt">Case 1</div>
      </div>
      <div class="case_btn" id="case_2_btn">
        <div class="case_btn_txt">Case 2</div>
      </div>
      <div class="case_btn" id="case_3_btn">
        <div class="case_btn_txt">Case 3</div>
      </div>
      <div class="case_btn" id="case_4_btn">
        <div class="case_btn_txt">Case 4</div>
      </div>
      <div class="case_btn" id="case_5_btn">
        <div class="case_btn_txt">Case 5</div>
      </div>
    </div>
  </div>
    
  <div id="content">
    <div id="image_placeholder"></div>
    <div id="case_text_container"></div>
    <div id="start_btn"></div>
  </div>
    
</div>
</body>

Also tried:

var svg = $("#image_placeholder")[0].contentDocument.documentElement;

Solution

You need to wait for hte image to load before you can select it with jquery. The code to query the image does not wait until it is loaded, it will fire immediatly (while the div is still empty)

$('#image_placeholder').load('cases/case_1/images/case_1_1.svg', function() {
 // now the image should be loaded!
  var svg = $('#image_placeholder').find('svg')[0];
  alert(svg);
  svg.setAttribute('height', '50%')     
});

This should fix your issue.