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全屏元素添加CSS，使宽度和高度达到100%，位置固定，顶部为0，因为这似乎是其他人所做的，但到目前为止没有任何效果。是什么原因导致它在Chrome上无法正常工作？任何想法都将不胜感激。

如果您发现Chrome bug，请向Chrome的bugtracker报告。我不认为这是Chrome bug，我认为这是我的代码的问题。我已经能够用上面的代码在Chrome中全屏显示其他非svg图像，我只是在svg文件中遇到了这个问题。我很确定这确实是Chrome中的一个bug（或者说是一个错误）。您可以通过将

元素包装在

或类似文件中，并在div上调用

requestFullscreen（）

来解决它。是的，经过大量测试，我确实发现这是一个Chrome错误，并按照您的建议解决了它。不幸的是，但至少这是可以解决的。如果你发现了Chrome bug，请向Chrome的bugtracker报告。我不认为这是Chrome bug，我认为这是我的代码的问题。我已经能够用上面的代码在Chrome中全屏显示其他非svg图像，我只是在svg文件中遇到了这个问题。我很确定这确实是Chrome中的一个bug（或者说是一个错误）。您可以通过将

元素包装在

或类似文件中，并在div上调用

requestFullscreen（）

来解决它。是的，经过大量测试，我确实发现这是一个Chrome错误，并按照您的建议解决了它。不幸的是，但至少这是可以解决的问题。