OpenSeaDragon全屏模式下SVG滤镜未生效问题求助

问题：用OpenSeaDragon实现图片查看器，给复选框绑定事件后，勾选时能给图片容器添加SVG滤镜class，正常模式下滤镜生效，但切换到全屏模式后滤镜就失去效果了。

问题原因 #

OpenSeaDragon进入全屏时，会把图片渲染内容转移到一个新创建的全屏专用容器（通常是挂载在body下的div.openseadragon-full-page元素），原来的#openseadragon1容器不再负责显示全屏后的图片，所以给它添加的滤镜class无法作用到全屏内容上。

解决方法 #

通过监听OpenSeaDragon的fullscreen-change事件，在全屏状态切换时，同步把滤镜class应用到全屏容器上，同时保留对原容器的class操作以兼容非全屏模式。

修改后的完整代码 #

JavaScript

var filter_gs_mid_Checkbox1 = document.getElementById('openseadragon1-filter-gs-mid');
var viewer1 = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
  tileSources: 'https://openseadragon.github.io/example-images/highsmith/highsmith.dzi',
  showNavigator: true,
});

// 统一处理滤镜class的添加/移除
function syncFilterClass(targetContainer, isChecked) {
  if (isChecked) {
    targetContainer.classList.add('filter-gs-mid');
  } else {
    targetContainer.classList.remove('filter-gs-mid');
  }
}

// 复选框切换事件
filter_gs_mid_Checkbox1.addEventListener('change', e => {
  var originalViewer = document.getElementById("openseadragon1");
  syncFilterClass(originalViewer, e.target.checked);
  
  // 同步到当前存在的全屏容器
  var fullscreenContainer = document.querySelector('.openseadragon-full-page');
  if (fullscreenContainer) {
    syncFilterClass(fullscreenContainer, e.target.checked);
  }
});

// 监听全屏状态变化
viewer1.addHandler('fullscreen-change', event => {
  var isChecked = filter_gs_mid_Checkbox1.checked;
  var fullscreenContainer = document.querySelector('.openseadragon-full-page');
  
  if (event.fullscreen) {
    // 进入全屏时给全屏容器添加滤镜class
    syncFilterClass(fullscreenContainer, isChecked);
  } else {
    // 退出全屏时恢复原容器的滤镜状态
    var originalViewer = document.getElementById("openseadragon1");
    syncFilterClass(originalViewer, isChecked);
  }
});

CSS

.filter-gs-mid {
  filter: url(#grayscale-mid-filter);
}

#openseadragon1 {
  border: 1px solid #000;
  height:250px;
}

/* 确保全屏容器能继承滤镜样式 */
.openseadragon-full-page {
  filter: inherit;
}

HTML

<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>

<!-- SVG滤镜定义 -->
<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale-mid-filter"><feColorMatrix type="matrix" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 0"></feColorMatrix></filter>
</svg>

<div>
  <div id="openseadragon-tools1" class="openseadragon-tools">
    <input type="checkbox" id="openseadragon1-filter-gs-mid" name="openseadragon1-filter-gs-mid" />
    <label for="openseadragon1-filter-gs-mid">Grayscale middle</label>
  </div>
  
  <div id="openseadragon-viewer1">
    <div id="openseadragon1" class="openseadragon"></div>
  </div>
</div>

说明 #

1. 新增syncFilterClass函数统一处理class操作，避免重复代码
2. 复选框切换时，同时更新原容器和当前全屏容器的滤镜状态
3. 监听fullscreen-change事件，在全屏切换时同步滤镜状态
4. CSS中给全屏容器添加filter: inherit，确保滤镜样式能正确继承

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