隐藏相邻div时部分SVG元素消失的问题求助

我做了个项目，页面里有多个包含SVG仪表盘的div，每个仪表盘是多层结构，正常显示没问题。结构大概是这样：

<div>  <!-- 通过CSS的display属性控制过滤 -->
  <svg>
    <defs>
    </defs>
    <g>
    </g> <!-- 多个g标签 -->
  </svg>
</div>

我用jQuery配合下拉菜单做视图过滤，只是把div的display属性在inline-block和none之间切换。现在遇到的问题是：需要隐藏的div确实隐藏了，但显示的div里的SVG会丢失整个<g>图层；恢复全部显示后，图层又能正常复原。取消过滤（id=-1）的状态和过滤视图里显示的div状态一致，过滤代码如下：

function filterCell(id) {
  $('.theseGauges').each(function () {
      let filteredList = CellM.filter(a => a.cellNameId == id);
      if (parseInt(id) == -1) {
          $(this).css({ 'display': "inline-block" });
      } else {          
          let a = filteredList.findIndex(b => b.machineId == $(this).attr("mid"));
          if (a != -1) {
              $(this).css({ 'display': "inline-block" });
          } else {
              $(this).css({ 'display': 'none' });
          }
      }
    })  
}

奇怪的是，按位置过滤仪表盘时完全正常（thisOption==1代表显示全部位置），代码是：

$('#filterMachineLocation').change(function (e) {
    let thisOption = $(this).val();
    $('.theseGauges').each(function () {
        if (parseInt(thisOption) == 1) {
            $(this).css({ 'display': "inline-block" });
        } else if (parseInt($(this).attr('loc')) != thisOption) {
            $(this).css({ 'display': 'none' });
        } else {
            $(this).css({ 'display': "inline-block" });
        }
    });

Chrome和Edge里都存在这个问题。我用开发者工具复制了两种状态下的div HTML，用WinMerge对比过，结构完全一致，求解决思路。

1. 浏览器渲染优化导致SVG图层未重绘 #

浏览器对display:none的元素会暂停渲染相关资源，当切换回inline-block时，部分SVG渲染引擎可能没有触发完整重绘，尤其是多层<g>结构的元素。

解决办法： #

• 替换display:none方案：改用visibility:hidden + 尺寸隐藏的组合，让元素保留文档流位置但视觉隐藏，避免浏览器暂停内部SVG的渲染状态：

// 隐藏元素时
$(this).css({ 'visibility': 'hidden', 'height': '0', 'width': '0', 'overflow': 'hidden' });
// 显示元素时
$(this).css({ 'visibility': 'visible', 'height': 'auto', 'width': 'auto', 'overflow': 'visible' });

• 手动触发SVG重绘：在显示div后，给SVG添加临时属性再移除，强制浏览器重绘：

$(this).find('svg').attr('data-redraw', 'true').removeAttr('data-redraw');

2. jQuery批量修改样式的异步渲染问题 #

filterCell函数中循环修改display属性时，浏览器可能批量处理渲染任务，导致部分SVG没来得及完成更新。

解决办法： #

• 改用原生DOM操作修改样式，减少jQuery包装的开销：

// 显示时
this.style.display = 'inline-block';
// 隐藏时
this.style.display = 'none';

• 强制触发页面重排：修改完所有元素的display后，读取任意元素的offsetHeight，强制浏览器完成当前渲染队列：

function filterCell(id) {
  $('.theseGauges').each(function () {
      // ... 原有逻辑代码
  });
  // 强制重排
  document.body.offsetHeight;
}

3. SVG图层依赖初始渲染上下文 #

如果使用了第三方SVG仪表盘库，部分库会在初始化时绑定元素的可见状态，当元素被设为display:none后，内部图层状态被销毁，恢复显示时未重新初始化。

解决办法： #

• 重初始化SVG仪表盘：在显示div后，重新调用仪表盘的初始化方法（假设初始化方法为initGauge）：

$(this).css({ 'display': 'inline-block' }).find('svg').each(function() {
  initGauge(this);
});

• 自定义SVG绘制逻辑的话，在显示元素时重新绘制所有<g>图层。

4. 过滤逻辑的重复状态切换 #

虽然HTML结构一致，但filterCell中的数据匹配可能导致部分元素被反复切换显示/隐藏状态，触发渲染bug。

解决办法： #

• 优化过滤逻辑，仅当元素状态需要变化时才修改display属性：

function filterCell(id) {
  $('.theseGauges').each(function () {
      let shouldShow = false;
      let filteredList = CellM.filter(a => a.cellNameId == id);
      if (parseInt(id) == -1) {
          shouldShow = true;
      } else {          
          let a = filteredList.findIndex(b => b.machineId == $(this).attr("mid"));
          shouldShow = a != -1;
      }
      // 仅状态不一致时修改
      const currentDisplay = $(this).css('display');
      if (shouldShow && currentDisplay !== 'inline-block') {
          $(this).css({ 'display': "inline-block" });
      } else if (!shouldShow && currentDisplay !== 'none') {
          $(this).css({ 'display': 'none' });
      }
  })  
}

• 添加日志排查：打印每个元素的mid和匹配结果，确认是否存在反复切换的情况：

console.log('元素mid:', $(this).attr('mid'), '是否显示:', shouldShow);

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