Установите путь клипа видео к фоновому изображению SVG - PullRequest
Новая
       8

Установите путь клипа видео к фоновому изображению SVG

0 голосов
/ 27 октября 2018

У меня есть изображение SVG, которое я использую для фона моей заставки.У меня также есть видео, которое я хочу наложить на изображение.Однако я хочу, чтобы видео не выходило за пределы SVG.

Я новичок в использовании изображений SVG, поэтому я попробовал несколько подходов без успеха для всех размеров браузера.До сих пор я могу только заставить стандартный размер SVG работать правильно.Я искал здесь помощь (https://www.sarasoueidan.com/blog/css-svg-clipping/)

1920 по 1080, пример определения размера, который работает

плохой пример, который не работает

Я публикую код для моей последней попытки. Здесь у меня есть тег SVG #splashbg, встроенный в тег так, чтобы он соответствовал свойствам CSS, которые мне нравятся. Я использую отдельный встроенный код SVG, который просто имеетпуть клипа, и я указываю путь клипа видео к тому SVG, используя clip-path: url(#clipPath)

В конце я хотел бы, чтобы мои 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>
...