svg 仅与内部窗口一样高，但是当您滚动窗口时，svg 会随之滚动

Question

在代码片段中，您可以清楚地看到 svg 没有填充整个视口。

我没有想到或意识到这会如此困难或难以弄清楚。

SVG 是蓝色框，蓝色框应该覆盖整个屏幕直至底部，即红色所在的位置。

我很困惑，我不明白如何让 SVG 填充整个视口。

红色应该在svg后面，svg应该覆盖整个视口

这样查看时，红色应该位于 svg 后面。

整个 svg 应该是可见的。

我不确定为什么背景位于 svg 上方，或者如何在代码中修复该问题。

有办法在代码中解决这个问题吗？

https://jsfiddle.net/6aqjxf0b/1/

如何在代码中解决这个问题？

svg.in-modal {
  position:absolute;
  left: 0;
  right:0;
  top: 0; 
}
.modal-content {
  position: relative;
  z-index: 2;
}

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: red;
}

html

<div id="myModal" class="modal open">
    <div class="modal-content">
        <div class="blog-pager close">
            <a title="Exit" aria-label="Close"></a>
        </div>
        <div class="ratio-keeper">
            <div class="wrap hide">
                    <div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
            </div>
            <div class="panel"></div>
        </div>
        <div class="playInitial remove"></div>
    </div>
  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg>
</div>

代码片段：

/*:root {
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
  }*/

svg {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.modal {
  display: none;
}

body:has(.modal.open) {
  overflow: hidden;
}

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: red;
  /* Fallback color */
  /*background-color: rgb(0, 0, 0, 0);*/

  /*--color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;



    background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
      linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
      linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
      linear-gradient(90deg,
        var(--color-b) 10px,
        #0000 10px 160px,
        var(--color-b) 160px),
      linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
      linear-gradient(90deg,
        var(--color-c) 15px,
        #0000 15px 155px,
        var(--color-c) 155px),
      linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
      linear-gradient(90deg,
        var(--color-d) 20px,
        #0000 20px 150px,
        var(--color-d) 150px),
      linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
      linear-gradient(90deg,
        var(--color-a) 25px,
        #0000 25px 145px,
        var(--color-a) 145px),
      linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
      linear-gradient(90deg,
        var(--color-b) 30px,
        #0000 30px 140px,
        var(--color-b) 140px),
      linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
      linear-gradient(90deg,
        var(--color-c) 35px,
        #0000 35px 135px,
        var(--color-c) 135px),
      linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
      linear-gradient(90deg,
        var(--color-d) 40px,
        #0000 40px 130px,
        var(--color-d) 130px),
      linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
      linear-gradient(90deg,
        var(--color-a) 45px,
        #0000 45px 125px,
        var(--color-a) 125px),
      linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
      linear-gradient(90deg,
        var(--color-b) 50px,
        #0000 50px 120px,
        var(--color-b) 120px),
      linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
      linear-gradient(90deg,
        var(--color-c) 55px,
        #0000 55px 115px,
        var(--color-c) 115px),
      linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
      linear-gradient(90deg,
        var(--color-d) 60px,
        #0000 60px 110px,
        var(--color-d) 110px),
      linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
      linear-gradient(90deg,
        var(--color-a) 65px,
        #0000 65px 105px,
        var(--color-a) 105px),
      linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
      linear-gradient(90deg,
        var(--color-b) 70px,
        #0000 70px 100px,
        var(--color-b) 100px),
      linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
      linear-gradient(90deg,
        var(--color-c) 75px,
        #0000 75px 95px,
        var(--color-c) 95px),
      linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
      linear-gradient(90deg,
        var(--color-d) 80px,
        #0000 80px 90px,
        var(--color-d) 90px),
      linear-gradient(var(--color-a), var(--color-a));
    background-size: 165px 165px;*/
}

.modal-content {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

  padding: 1px;
}

.modal-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #0059dd;
  pointer-events: none;
}

:root {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
}

.panel {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: repeating-linear-gradient(
      calc(var(--angle1) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)
    ),
    repeating-linear-gradient(
      calc(calc(var(--angle2) + 90) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)
    );
  background-color: transparent;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  z-index: 0;
  overflow: hidden;
  transform: translateY(0%);
  transition: 8s;
}

/*body:has(.splash-screen.hide[style]) .modal-content .panel {
    transition-delay: 4s;
    transform: translateY(calc(-100% - 1px));
  }*/

.panel.slide {
  transition-delay: 2s;
  transform: translateY(calc(-100% - 1px));
}

/*
  
  

All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
  transform: translateY(calc(-100% - 1px));
}

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  splashScreen.addEventListener('transitionend', function() {
    splashScreen.style.display = 'none';
  });
};*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.container {
  max-width: 642px;
  margin: 15px auto 30px;
  padding: 15px;
  /*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
  border: 1px solid #0059dd;
  border-radius: 0;
  background: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
}

.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}

/*.ratio-keeper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }*/

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-pager {
  transform: translatey(100%);
  pointer-events: none;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  /*margin: auto auto 0;*/
  pointer-events: initial;
  top: auto;
  bottom: -1px;
  margin: auto;
  right: 0;
  left: 0;
  /*margin: 10px auto 0;*/
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  opacity: 0;
  transition: opacity 3s ease-in;
  transition-delay: 0s;
  pointer-events: none;
}

.blog-pager.visible {
  opacity: 1;
  pointer-events: auto;
}

.blog-pager::before,
.blog-pager::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.blog-pager::after {
  transform: rotate(-45deg);
}

.wrap.hide {
  display: none;
}

.splash-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  inset: 0 0 0 0;
  background: transparent;
  opacity: 1;
  /* Set transition duration to 1 seconds */
  pointer-events: none;
  /*dissable mouse clicking */
  cursor: default;
}

.splash-screen.hide {
  opacity: 0;
  transition-delay: 1s;
  /* Add a delay of 1 seconds before the opacity changes to 0 */
  pointer-events: none;
  /* Re-enable mouse clicking after 1 seconds */
  cursor: default;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  /*width: 50%;*/
  width: calc(50% + 1px);
  /* rounding error fix */
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left.slide {
  left: 0;
}

.panel-right.slide {
  right: 0;
}

.panel-left svg, 
.panel-right svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;
}

.panel-left svg {
  left: 0;
}

.panel-right svg {
  right: 0;
}


/*.panel-left::before,
  .panel-right::before {
    content: "";
    position: fixed;

    height: 100%;
    width: 200%;
    top: 0;
    left: 0;
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
    background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
      linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
      linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
      linear-gradient(90deg,
        var(--color-b) 10px,
        #0000 10px 160px,
        var(--color-b) 160px),
      linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
      linear-gradient(90deg,
        var(--color-c) 15px,
        #0000 15px 155px,
        var(--color-c) 155px),
      linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
      linear-gradient(90deg,
        var(--color-d) 20px,
        #0000 20px 150px,
        var(--color-d) 150px),
      linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
      linear-gradient(90deg,
        var(--color-a) 25px,
        #0000 25px 145px,
        var(--color-a) 145px),
      linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
      linear-gradient(90deg,
        var(--color-b) 30px,
        #0000 30px 140px,
        var(--color-b) 140px),
      linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
      linear-gradient(90deg,
        var(--color-c) 35px,
        #0000 35px 135px,
        var(--color-c) 135px),
      linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
      linear-gradient(90deg,
        var(--color-d) 40px,
        #0000 40px 130px,
        var(--color-d) 130px),
      linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
      linear-gradient(90deg,
        var(--color-a) 45px,
        #0000 45px 125px,
        var(--color-a) 125px),
      linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
      linear-gradient(90deg,
        var(--color-b) 50px,
        #0000 50px 120px,
        var(--color-b) 120px),
      linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
      linear-gradient(90deg,
        var(--color-c) 55px,
        #0000 55px 115px,
        var(--color-c) 115px),
      linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
      linear-gradient(90deg,
        var(--color-d) 60px,
        #0000 60px 110px,
        var(--color-d) 110px),
      linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
      linear-gradient(90deg,
        var(--color-a) 65px,
        #0000 65px 105px,
        var(--color-a) 105px),
      linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
      linear-gradient(90deg,
        var(--color-b) 70px,
        #0000 70px 100px,
        var(--color-b) 100px),
      linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
      linear-gradient(90deg,
        var(--color-c) 75px,
        #0000 75px 95px,
        var(--color-c) 95px),
      linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
      linear-gradient(90deg,
        var(--color-d) 80px,
        #0000 80px 90px,
        var(--color-d) 90px),
      linear-gradient(var(--color-a), var(--color-a));
    background-size: 165px 165px;
  }

  .panel-right::before {
    left: -100%;
  }*/

.modal:not(.open) ~ .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.modal:not(.open) ~ .panel-right {
  transform: translateX(calc(100% + 1px));
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}

.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}

.st0 {
  stroke: rgb(0, 0, 0);
  stroke-width: 0px;
  fill: rgb(17, 85, 204);
}

.st1 {
  fill: none;
  stroke-width: 5px;
  stroke: rgb(17, 85, 204);
}

.panelsvg {
  position: fixed;
  left: -100vh;
  top: -100vh;
  pointer-events: none;
  opacity: 0;
}

svg.in-modal {
  position:absolute;
  left: 0;
  right:0;
  top: 0; 
}
.modal-content {
  position: relative;
  z-index: 2;
}

<div id="myModal" class="modal open">
    <div class="modal-content">
        <div class="blog-pager close">
            <a title="Exit" aria-label="Close"></a>
        </div>
        <div class="ratio-keeper">
            <div class="wrap hide">
                    <div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
            </div>
            <div class="panel"></div>
        </div>
        <div class="playInitial remove"></div>
    </div>
  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg>
</div>
<!-- end modal -->

<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
    </div>
    <div class="play1"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play2"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play3"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play4"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play5" data-id="AxLxnN6z0Og"></div>
</div>

<div class="slide panel-left">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <use href="#box" />
    </svg>
</div>

<div class="slide panel-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <use href="#box" />
    </svg>
</div>

<svg class="panelsvg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <g id="box">
        <defs>
            <pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
                <rect x="80" y="80" width="10" height="10" class="st0" />
                <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
                <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
                <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
                <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
                <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
                <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
                <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
                <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#repeatedPattern)" />
    </g>
</svg>

Answer 1

设置

svg.in-modal{ position: fixed; }

/*:root {
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
  }*/

svg {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.modal {
  display: none;
}

body:has(.modal.open) {
  overflow: hidden;
}

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: red;
  /* Fallback color */
  /*background-color: rgb(0, 0, 0, 0);*/

  /*--color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;



    background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
      linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
      linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
      linear-gradient(90deg,
        var(--color-b) 10px,
        #0000 10px 160px,
        var(--color-b) 160px),
      linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
      linear-gradient(90deg,
        var(--color-c) 15px,
        #0000 15px 155px,
        var(--color-c) 155px),
      linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
      linear-gradient(90deg,
        var(--color-d) 20px,
        #0000 20px 150px,
        var(--color-d) 150px),
      linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
      linear-gradient(90deg,
        var(--color-a) 25px,
        #0000 25px 145px,
        var(--color-a) 145px),
      linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
      linear-gradient(90deg,
        var(--color-b) 30px,
        #0000 30px 140px,
        var(--color-b) 140px),
      linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
      linear-gradient(90deg,
        var(--color-c) 35px,
        #0000 35px 135px,
        var(--color-c) 135px),
      linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
      linear-gradient(90deg,
        var(--color-d) 40px,
        #0000 40px 130px,
        var(--color-d) 130px),
      linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
      linear-gradient(90deg,
        var(--color-a) 45px,
        #0000 45px 125px,
        var(--color-a) 125px),
      linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
      linear-gradient(90deg,
        var(--color-b) 50px,
        #0000 50px 120px,
        var(--color-b) 120px),
      linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
      linear-gradient(90deg,
        var(--color-c) 55px,
        #0000 55px 115px,
        var(--color-c) 115px),
      linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
      linear-gradient(90deg,
        var(--color-d) 60px,
        #0000 60px 110px,
        var(--color-d) 110px),
      linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
      linear-gradient(90deg,
        var(--color-a) 65px,
        #0000 65px 105px,
        var(--color-a) 105px),
      linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
      linear-gradient(90deg,
        var(--color-b) 70px,
        #0000 70px 100px,
        var(--color-b) 100px),
      linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
      linear-gradient(90deg,
        var(--color-c) 75px,
        #0000 75px 95px,
        var(--color-c) 95px),
      linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
      linear-gradient(90deg,
        var(--color-d) 80px,
        #0000 80px 90px,
        var(--color-d) 90px),
      linear-gradient(var(--color-a), var(--color-a));
    background-size: 165px 165px;*/
}

.modal-content {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

  padding: 1px;
}

.modal-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #0059dd;
  pointer-events: none;
}

:root {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
}

.panel {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: repeating-linear-gradient(
      calc(var(--angle1) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)
    ),
    repeating-linear-gradient(
      calc(calc(var(--angle2) + 90) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)
    );
  background-color: transparent;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  z-index: 0;
  overflow: hidden;
  transform: translateY(0%);
  transition: 8s;
}

/*body:has(.splash-screen.hide[style]) .modal-content .panel {
    transition-delay: 4s;
    transform: translateY(calc(-100% - 1px));
  }*/

.panel.slide {
  transition-delay: 2s;
  transform: translateY(calc(-100% - 1px));
}

/*
  
  

All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
  transform: translateY(calc(-100% - 1px));
}

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  splashScreen.addEventListener('transitionend', function() {
    splashScreen.style.display = 'none';
  });
};*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.container {
  max-width: 642px;
  margin: 15px auto 30px;
  padding: 15px;
  /*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
  border: 1px solid #0059dd;
  border-radius: 0;
  background: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
}

.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}

/*.ratio-keeper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }*/

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-pager {
  transform: translatey(100%);
  pointer-events: none;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  /*margin: auto auto 0;*/
  pointer-events: initial;
  top: auto;
  bottom: -1px;
  margin: auto;
  right: 0;
  left: 0;
  /*margin: 10px auto 0;*/
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  opacity: 0;
  transition: opacity 3s ease-in;
  transition-delay: 0s;
  pointer-events: none;
}

.blog-pager.visible {
  opacity: 1;
  pointer-events: auto;
}

.blog-pager::before,
.blog-pager::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.blog-pager::after {
  transform: rotate(-45deg);
}

.wrap.hide {
  display: none;
}

.splash-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  inset: 0 0 0 0;
  background: transparent;
  opacity: 1;
  /* Set transition duration to 1 seconds */
  pointer-events: none;
  /*dissable mouse clicking */
  cursor: default;
}

.splash-screen.hide {
  opacity: 0;
  transition-delay: 1s;
  /* Add a delay of 1 seconds before the opacity changes to 0 */
  pointer-events: none;
  /* Re-enable mouse clicking after 1 seconds */
  cursor: default;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  /*width: 50%;*/
  width: calc(50% + 1px);
  /* rounding error fix */
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left.slide {
  left: 0;
}

.panel-right.slide {
  right: 0;
}

.panel-left svg, 
.panel-right svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;
}

.panel-left svg {
  left: 0;
}

.panel-right svg {
  right: 0;
}


/*.panel-left::before,
  .panel-right::before {
    content: "";
    position: fixed;

    height: 100%;
    width: 200%;
    top: 0;
    left: 0;
    --color-a: #1155cc;
    --color-b: transparent;
    --color-c: #1155cc;
    --color-d: transparent;
    background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
      linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
      linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
      linear-gradient(90deg,
        var(--color-b) 10px,
        #0000 10px 160px,
        var(--color-b) 160px),
      linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
      linear-gradient(90deg,
        var(--color-c) 15px,
        #0000 15px 155px,
        var(--color-c) 155px),
      linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
      linear-gradient(90deg,
        var(--color-d) 20px,
        #0000 20px 150px,
        var(--color-d) 150px),
      linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
      linear-gradient(90deg,
        var(--color-a) 25px,
        #0000 25px 145px,
        var(--color-a) 145px),
      linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
      linear-gradient(90deg,
        var(--color-b) 30px,
        #0000 30px 140px,
        var(--color-b) 140px),
      linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
      linear-gradient(90deg,
        var(--color-c) 35px,
        #0000 35px 135px,
        var(--color-c) 135px),
      linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
      linear-gradient(90deg,
        var(--color-d) 40px,
        #0000 40px 130px,
        var(--color-d) 130px),
      linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
      linear-gradient(90deg,
        var(--color-a) 45px,
        #0000 45px 125px,
        var(--color-a) 125px),
      linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
      linear-gradient(90deg,
        var(--color-b) 50px,
        #0000 50px 120px,
        var(--color-b) 120px),
      linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
      linear-gradient(90deg,
        var(--color-c) 55px,
        #0000 55px 115px,
        var(--color-c) 115px),
      linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
      linear-gradient(90deg,
        var(--color-d) 60px,
        #0000 60px 110px,
        var(--color-d) 110px),
      linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
      linear-gradient(90deg,
        var(--color-a) 65px,
        #0000 65px 105px,
        var(--color-a) 105px),
      linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
      linear-gradient(90deg,
        var(--color-b) 70px,
        #0000 70px 100px,
        var(--color-b) 100px),
      linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
      linear-gradient(90deg,
        var(--color-c) 75px,
        #0000 75px 95px,
        var(--color-c) 95px),
      linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
      linear-gradient(90deg,
        var(--color-d) 80px,
        #0000 80px 90px,
        var(--color-d) 90px),
      linear-gradient(var(--color-a), var(--color-a));
    background-size: 165px 165px;
  }

  .panel-right::before {
    left: -100%;
  }*/

.modal:not(.open) ~ .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.modal:not(.open) ~ .panel-right {
  transform: translateX(calc(100% + 1px));
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}

.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}

.st0 {
  stroke: rgb(0, 0, 0);
  stroke-width: 0px;
  fill: rgb(17, 85, 204);
}

.st1 {
  fill: none;
  stroke-width: 5px;
  stroke: rgb(17, 85, 204);
}

.panelsvg {
  position: fixed;
  left: -100vh;
  top: -100vh;
  pointer-events: none;
  opacity: 0;
}

svg.in-modal {
  position:fixed;
  left: 0;
  right:0;
  top: 0; 
}
.modal-content {
  position: relative;
  z-index: 2;
}

<div id="myModal" class="modal open">
    <div class="modal-content">
        <div class="blog-pager close">
            <a title="Exit" aria-label="Close"></a>
        </div>
        <div class="ratio-keeper">
            <div class="wrap hide">
                    <div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
            </div>
            <div class="panel"></div>
        </div>
        <div class="playInitial remove"></div>
    </div>
  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg>
</div>
<!-- end modal -->

<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
    </div>
    <div class="play1"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play2"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play3"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play4"></div>
</div>
<div class="container">
    <div class="ratio-keeper">
        <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="play5" data-id="AxLxnN6z0Og"></div>
</div>

<div class="slide panel-left">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <use href="#box" />
    </svg>
</div>

<div class="slide panel-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <use href="#box" />
    </svg>
</div>

<svg class="panelsvg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <g id="box">
        <defs>
            <pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
                <rect x="80" y="80" width="10" height="10" class="st0" />
                <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
                <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
                <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
                <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
                <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
                <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
                <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
                <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#repeatedPattern)" />
    </g>
</svg>