jQuery查找并设置已加载SVG的高度

2ul0zpep  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(90)

试图找到并设置高度加载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%')       
});

警报状态为“未定义”。所以这个问题需要解决。
然后在console中设置svg的高度会返回一个错误:

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)

svg本身在svg代码中没有设置高度和宽度。只有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>

还尝试:

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

erhoui1w1#

你需要等待hte图像加载,然后才能用jquery选择它。查询图像的代码不会等到图像被加载,它会立即触发(当div仍然为空时)

$('#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%')     
});

这应该可以解决您的问题。

相关问题