如何解决JQuery加载SVG后无法查找并设置其高度的问题？

问题原因 #

• jQuery的load()是异步方法，调用后立刻查找SVG元素时，文件还未加载完成，导致获取到undefined，触发Cannot read properties of undefined错误。
• 尝试的contentDocument方法仅适用于iframe/object嵌入的SVG，不适用于直接加载到div内的场景。

解决方案 #

方案1：利用load()的回调函数（确保加载完成后操作） #

修改代码，将SVG的操作逻辑放在load()的回调函数中，确保元素已加载：

$('#case_1_btn').one('click', function(){
  $('#image_placeholder').load('cases/case_1/images/case_1_1.svg', function() {
    // 加载完成后执行
    const svg = $('#image_placeholder').find('svg')[0];
    if (svg) {
      svg.setAttribute('height', '50%');
    }
  });
});

方案2：用CSS控制SVG高度（更简洁推荐） #

由于你的SVG已包含viewBox属性，直接通过CSS设置高度即可自动维持宽高比，无需JS操作：

#image_placeholder svg {
  height: 50%;
  width: auto; /* 保持SVG原比例 */
}

内容的提问来源于stack exchange，提问作者IlludiumPu36