SVG全屏Javascript在FireFox中可正常运行，但在Chrome中无法正常运行

问题描述

尝试在我的网站上使用Javascript全屏显示SVG标签时遇到错误。团队中的其他人告诉我，这曾经可以正常工作，但在过去的某个时候已经失效了。在Firefox上，代码可以完美运行，并且SVG图像变为全屏显示，但是在Chrome上，整个页面变为全屏显示，并且SVG移到了屏幕的左下角，似乎放在了其他页面的顶部页面的元素。

我正在使用以下代码来处理全屏操作，该操作已连接到按钮事件侦听器：

function fullscreen() {
  var element = document.getElementById("myFullscreenSVG");
  var isFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
  (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
  (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
  (document.msFullscreenElement && document.msFullscreenElement !== null);
  if (!isFullScreen) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { /* Firefox */
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) { /* Chrome,Safari & Opera */
      element.webkitRequestFullScreen();
    } else if (element.msRequestFullscreen) { /* IE/Edge */
      element.msRequestFullscreen();
    } else {
      console.log('Failed to enter fullscreen mode on dependency visualization SVG');
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome,Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    } else {
      showAlert("Exit fullscreen Failed; Press [ESC] to exit");
      console.log('Failed to exit fullscreen mode on dependency visualization SVG');
    }
  }
}

我已经尝试了所有可能想到的方法，例如为webkit-fullscreen元素添加CSS以使宽度和高度为100％，位置固定且顶部为0，因为这似乎是其他人所做的，但是到目前为止没有任何效果。是什么导致它在Chrome上无法正常工作？任何想法将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）