SVG 叠加在背景视频 CSS 上

Question

我在让 svg 覆盖层占据 100% 宽度时遇到问题，但修改了高度，使其与我需要的位置对齐，以便曲线在视频上可见（请参阅屏幕截图）。覆盖 SVG 以使其正确对齐和显示的最佳方法是什么，谢谢。

https://codepen.io/JamesTsetsekas/pen/BaggxJq

<style>
  .video-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: -1;
  }

  .vimeo-wrapper {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    overflow: hidden;
    position: relative;
  }

  .vimeo-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center;
    z-index: 2 !important;
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 1 !important;
    opacity: 22% !important;
  }

  .text-section {
    padding: 20px;
    text-align: center;
  }

  .text-content {
    max-width: 800px;
    margin: 0 auto;
    font-weight: 600;
  }

  .text-content p {
    font-size: 48px;
    letter-spacing: -2px;
    line-height: 50pt;
    color: #020202;
  }

  .learn-more-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #f7cd46;
    color: black;
    text-decoration: none;
  }

  .svg-overlay {
    position: absolute;
    top: 173px;
    left: 0;
    width: 100%;
    height: 200%;
    /* Adjust the height as needed */
    z-index: 3;
    object-fit: cover;
  }

  .services {
    margin-top: 20px;
    font-size: 54pt;
    /* Adjusted value */
    font-weight: 600;
    /* Semibold */
    color: white;
  }

  .down-arrow {
    position: absolute;
    bottom: 70px !important;
    /* Adjusted value */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
</style>

<section class="video-section">
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/1008961063?background=1&autoplay=1&loop=1&byline=0&title=0"
      webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="video-overlay"></div>
    <div class="text-overlay">
      <h1>Creativity for</h1>
      <h1>the complete</h1>
      <h1>brand</h1>
      <h1>experience.</h1>
      <div class="services">
        Advertising | Branding | Digital | Social | Events
      </div>
    </div>
  </div>
  <div class="svg-overlay">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2678" version="1.1">
      <path
        d="M 0 64.159 L 0 128.317 6.250 122.384 C 43.706 86.827, 103.466 43.808, 162 10.266 C 171.075 5.066, 178.688 0.629, 178.917 0.406 C 179.146 0.183, 138.983 0, 89.667 0 L 0 0 0 64.159 M 1825.083 0.406 C 1825.313 0.629, 1832.925 5.066, 1842 10.266 C 1898.402 42.587, 1949.025 78.621, 1991.750 116.862 L 2000 124.246 2000 62.123 L 2000 0 1912.333 0 C 1864.117 0, 1824.854 0.183, 1825.083 0.406 M -0 1353.282 L -0 1944.001 1000.250 1943.750 L 2000.500 1943.500 2000.601 1352.500 C 2000.656 1027.450, 2000.514 762.735, 2000.285 764.244 C 1999.245 771.098, 1941.602 817.213, 1897.711 846.306 C 1705.220 973.894, 1431.636 1055.271, 1134 1073.470 C 1085.850 1076.415, 1056.710 1077.249, 1002 1077.249 C 947.290 1077.249, 918.150 1076.415, 870 1073.470 C 572.426 1055.275, 298.778 973.891, 106.383 846.368 C 69.328 821.807, 28.086 789.742, 5.750 768.127 L -0 762.563 -0 1353.282 M 0.497 1353.500 C 0.497 1678.550, 0.611 1811.376, 0.750 1648.668 C 0.889 1485.960, 0.889 1220.010, 0.750 1057.668 C 0.611 895.326, 0.497 1028.450, 0.497 1353.500"
        stroke="none" fill="#fffcfc" fill-rule="evenodd" />
    </svg>
  </div>
</section>

<section class="text-section">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehen.</p>
    <a href="#" class="learn-more-btn">Learn More</a>
  </div>
</section>

我尝试在 .svg-overlay 上设置 width: 100% & height: 200% 以及 SVG 上的serveAspectRatio="none" 属性

Answer 1

您的

svg

可能有自己的

height

和

width

，您应该在添加任何样式之前将其删除。这应该可以解决你的问题。