SVG не растягивается на весь блок

Question

SVG не растягивается на весь блок

Рейтинг: 0Ответов: 1Опубликовано: 18.06.2023

Есть блок с видео над видео svg-изображение, но svg не закрывает весь блок и оставляет щели. Есть ли способ это поправить ?

p.s. Пробовал с помощью псевдоэлементов закрыть щели но это так себе вариант.

<div class="directions__video">     
    <div class="directions__video-container">
         <div class="directions__video-container-in">
              <svg xmlns="http://www.w3.org/2000/svg" width="620" height="620" viewBox="0 0 620 620" fill="none">
                   <path class="svg-move-circle" d="M0 0V620H620V0H0ZM359.582 615.0966C155.4172 611.9119 1.3701 447.1727 2.3348 285.9819C-0.3652 121.0493 148.015 -7.4427 311.6799 2.6018C502.8146 14.7151 614.1982 151.6778 617.0649 349.8435C623.6315 570.3759 483.1004 615.0728 359.582 615.0966Z" fill="#002D6D"></path>
              </svg>
             <video src="/uploads/storage/6b/4b/2e6733189ccce556fae7f216faaa9e93f595e03c.mp4#t=0.5" width="1300" height="100%" autoplay="" playsinline="" loop="" muted="" poster="/render/storage/26/a8/b5158d9c49737fba410e1b9f72d721a8a8a68b8d.jpg"></video>
      </div>
   </div>
</div>

Cтили:

.directions__video {
   position: relative;
   margin-right: 75px;
}
.directions__video-container {
   position: relative;
   display: inline-flex;
}
.directions__video-container-in {
   overflow: hidden;
   display: flex;
   width: 100%;
   height: 100%;
   position: relative;
}
.directions__video-container svg {
   position: relative;
   z-index: 5;
}
.directions__video-container video {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

css html видео svg

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

При воспроизведении вашего кода не заметны нестыковки SVG маски и подложенного слоя видео. В принцине можно сделать SVG слой чуть больше на 1 % по ширине и высоте. А слой видео чуть меньше и спозиционировать со смещением, чтобы устранить погрешность наложения слоев. Код прилагаю.

<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div class="directions__video">     
            <div class="directions__video-container">
                 <div class="directions__video-container-in">
                      <svg xmlns="http://www.w3.org/2000/svg" width="620" height="620" viewBox="0 0 620 620" fill="none">
                           <path class="svg-move-circle" d="M0 0V620H620V0H0ZM359.582 615.0966C155.4172 611.9119 1.3701 447.1727 2.3348 285.9819C-0.3652 121.0493 148.015 -7.4427 311.6799 2.6018C502.8146 14.7151 614.1982 151.6778 617.0649 349.8435C623.6315 570.3759 483.1004 615.0728 359.582 615.0966Z" fill="#002D6D"></path>
                      </svg>
                     <video src="/uploads/storage/6b/4b/2e6733189ccce556fae7f216faaa9e93f595e03c.mp4#t=0.5" width="100%" height="100%" autoplay="" playsinline="" loop="" muted="" poster="/render/storage/26/a8/b5158d9c49737fba410e1b9f72d721a8a8a68b8d.jpg"></video>
              </div>
           </div>
        </div>
        <style>
            body {
                background: #012d6d;
            }
            .directions__video {
               position: relative;
               margin-right: 75px;
                background: #012d6d;    
            }
            .directions__video-container {
               position: relative;
               display: inline-flex;
            }
            .directions__video-container-in {
               overflow: hidden;
               display: flex;
               width: 100%;
               height: 100%;
               position: relative;
            }
            .directions__video-container svg {
                position: relative;
                z-index: 5;
                width: 101%;
                height: 101%;
            }
            .directions__video-container video {
                position: absolute;
                top: 1px;
                left: calc(50% - 2px);
                transform: translateX(-50%);
                background: red;
                width: calc(100% - 5px);
                height: calc(100% - 5px);
            }
        </style>
    </body>
</html>

P.S. В книге "Векторная графика для начинающих: теория и практика технического дизайна" есть пошаговое решение как работать с многослойной иллюстрацией, включая SVG маски для обрамления композиции + псевдоклассы слоев с глубиной z-index. Посмотрите там решение с кодом.

SVG не растягивается на весь блок

Ответы