Question

我有一个用于初始页面背景的SVG图像。我也有一个要叠加在图像上的视频。但是，我希望视频不延伸到SVG之外。

我是使用SVG图片的新手，所以我尝试了几种方法，但对于所有浏览器大小均未成功。到目前为止，我只能使SVG的标准尺寸正常工作。我在这里寻求帮助（https://www.sarasoueidan.com/blog/css-svg-clipping/）

1920 by 1080 sizing example that works

bad example that doesn't work

我正在将代码发布到最近的尝试中。在这里，我将#splashbg SVG嵌入了一个标签中，以便它可以根据我喜欢的CSS属性正确调整大小。我使用了一个单独的SVG内联代码，其中仅包含一个剪切路径，并且我使用clip-path: url(#clipPath)

将视频的剪切路径引用到了该SVG的剪切路径。

最后，我希望我的SVG不在图像标签内，而SVG可以缩放到我现在设置的CSS属性...

链接到视频下载：

https://drive.google.com/file/d/1R2BCyEhbQtXsKwrTuudW0WvTy1n69QEZ/view?usp=sharing

* {
  padding: 0;
  margin: 0;
}

html,
body,
#container {
  height: 100%;
}

#container {
  display: block;
  position: relative;
  max-width: 1920px;
  box-sizing: border-box;
  margin: 0 auto;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}

#splashbg {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  max-height: 1080px;
  z-index: -1;
  transition: 0.3s;
}

#splashVideo {
  clip-path: url(#clipPath);
  position: absolute;
  top: 60px;
  left: 0;
  opacity: 0.15;
  width: 100%;
}

#clippingPath {
  position: absolute;
  top: 60px;
  left: 0px;
  width: 100%;
}

header {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  float: right;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: black;
  background-size: cover;
  box-sizing: border-box;
  overflow: visible;
  transition: 0.3s;
  z-index: 3;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="container">

    <!-- SVG CODE FOR splashbg
      <?xml version="1.0" encoding="utf-8" ?>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080">
        <defs>
          <clipPath id="clip_0">
            <rect width="1920" height="1080" clip-rule="evenodd"/>
          </clipPath>
          <linearGradient id="gradient_0" gradientUnits="userSpaceOnUse" x1="114.93024" y1="804.28363" x2="731.74414" y2="532.47437">
            <stop offset="0" stop-color="rgb(95,108,254)"/>
            <stop offset="1" stop-color="rgb(152,68,241)"/>
          </linearGradient>
        </defs>
        <g clip-path="url(#clip_0)">
          <path fill="url(#gradient_0)" stroke="none" d="M0 0L1920 0C1920 0 1679.79 723.005 982.5 782C46.6857 861.175 0 1080 0 1080L0 0Z"/>
        </g>
        <defs>
          <clipPath id="clip_1">
            <rect width="1920" height="1080" clip-rule="evenodd"/>
          </clipPath>
          <linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="133.53491" y1="857.77203" x2="1022.4418" y2="366.19531">
            <stop offset="0" stop-color="rgb(95,151,254)"/>
            <stop offset="1" stop-color="rgb(183,68,241)" stop-opacity="0.40000001"/>
          </linearGradient>
        </defs>
        <g clip-path="url(#clip_1)">
          <path fill="url(#gradient_1)" stroke="none" d="M0 0L1920 0C1920 0 1695.4 821.884 934 787C172.604 752.116 0 1080 0 1080L0 0Z"/>
        </g>
      </svg>
    -->


    <img src="images/splashbg.svg" id="splashbg">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 1920 1080" preserveAspectRatio="none" id="clippingPath">
    	<defs>
    		<clipPath id="clipPath">
    			<path fill = "#FFFFFF" stroke="#000000" stroke-width="1.5794" d="M0 0L1920 0C1920 0 1695.4 821.884 934 787C172.604 752.116 0 1080 0 1080L0 0Z"/>
    		</clipPath>
    	</defs>
    </svg>

    <video autoplay loop src="images/splashvid.mp4" id="splashVideo"></video>

    <header>
    </header>

  </div>
</body>

</html>

将视频的剪辑路径设置为SVG背景图像

0 个答案: