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

时间:2020-08-13 12:26:43

标签: javascript html svg webkit fullscreen

尝试在我的网站上使用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上无法正常工作?任何想法将不胜感激。

0 个答案:

没有答案
相关问题