通过jQuery加载到绝对定位div中的SVG无法随div移动的解决方案咨询

问题根源 #

SVG没跟着父div移动，通常是因为SVG自身的定位规则脱离了父元素的布局流，或者SVG自带的属性（如transform）导致它相对于视口而非父容器定位。

具体修复方案 #

1. 重置SVG的定位属性 #

如果SVG被设置了absolute/fixed定位，会脱离父div的控制，强制把它设为相对定位：

// 在获取SVG元素后添加
svg.style.position = 'relative';
// 或者用jQuery写法
$(svg).css('position', 'relative');

2. 移除SVG的transform位移 #

部分SVG文件内部会自带transform="translate(x,y)"属性，这会让它基于视口偏移，直接移除该属性即可：

svg.removeAttribute('transform');

3. 给父div设置明确尺寸 #

如果父div#image_placeholder没有设置宽高，SVG可能会按视口尺寸渲染，导致视觉上没跟着移动，给父div同步设置尺寸：

$('#image_placeholder').css({
  'left': '70%',
  'height': '70%', // 和SVG的height匹配
  'width': 'auto' // 或者根据SVG比例设置固定值
});

4. 用CSS全局控制SVG布局 #

直接在样式表中定义SVG继承父容器的布局规则，避免JS操作冲突：

#image_placeholder svg {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none !important;
}

修改后的完整代码示例 #

$('#case_1_btn').one('click', function() {
  $('#image_placeholder').load('cases/case_1/images/case_1_1.svg', function() {
    var svg = $('#image_placeholder').find('svg')[0];
    svg.style.position = 'relative';
    svg.style.width = '100%';
    svg.setAttribute('height', '70%');  
    $('#image_placeholder').css({
      'left': '70%',
      'height': '70%'
    });

    $('#case_text_container').load('cases/case_1/case_1_start.html');
  }); 
});

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