SVG линия анимации исчезает на фоне изображения? - PullRequest
Новая
       101

SVG линия анимации исчезает на фоне изображения?

0 голосов
/ 08 апреля 2019

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

Я сделал анимацию svg line с черным bg, который исчезает, когда анимация завершена, но я хочу показать изображение под или вместо анимации и черный div, когда он исчезает. Я перепробовал все, что смог найти. Я могу получить изображение под ним, но оно не того же размера и местоположения, что и черный div, и изображение также исчезает (думаю, из-за кода jquery fade div.center-div?). Я хочу, чтобы изображение осталось, и я также хочу, чтобы оно было отзывчивым. Я сделал jsfiddle, но черный div / svg в нем не исчезает, хотя на моем компьютере это происходит, не знаю почему. Так что, к сожалению, здесь вы не видите jpg под ним - https://jsfiddle.net/keltoid/dw2vcmoq/47/

$(document).ready(function(){
setTimeout(function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
}, 4500);
});
svg {
  height: 100%;
  width: 100%;
  margin:auto;
  
}
.wrapper {position:relative; background-image:url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/treebanner2.jpg) ;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  z-index:3; 

  background-repeat:no-repeat;
 } 
 	
.center-div
{
  position:relative;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  background-color: #000;
  z-index:1; 
  background-position: left top;           
}
.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
	
}
.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="center-div">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
 height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<g id="line">

	<path class="st1" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st1" d="M739.8,232.8"/>

	<path class="st2" d="M739.8,232.8"/>

</g>
</svg>
</div>
</div>

Черные линии bg и svg .center-div работают правильно и постепенно исчезают. Фоновое изображение показывает, как только они исчезают, но не заполняют пространство, которое делал черный bg div - оно меньше, оно не центрировано, а также исчезает. Я не хочу, чтобы это исчезло. Он также не реагирует как анимация черного div и линии.

1 Ответ

0 голосов
/ 09 апреля 2019

Причина, по которой фон исчезает, заключается в том, что, как только вы убираете внутри него вещи, которые занимают место, он сжимается до нуля.Задав для него ширину и высоту, фон остается после исчезновения.

Причина, по которой фоновое изображение не заполняет прямоугольник, заключается в том, что вы не масштабируете его.

См. Скрипку здесь: https://jsfiddle.net/a8mu9z0v/

Я использовал 

background-size: cover;

Но вам может пригодиться другой метод масштабирования.

Редактировать:

Настройка фонового изображения в зависимости от направления его масштабирования.

Если вы измените ширину обертки в моем примере, но оставите высоту как фиксированное значение , фоновое изображение будет масштабировано до ширины, но обрезает нижнюю часть изображения.когда масштабированное изображение превышает границы. 

width: 100%;
height: 200px;

Если вы измените размер фона на 100%, он будет масштабироваться до границ оболочки, но не будет сохранять свое соотношение сторон: 

background-size: 100% 100%;

Если вы хотите сохранить определенное соотношение сторон для обертки, то есть определенные приемы CSS, которые могут помочь вам сделать это, что вы можете увидеть в другом месте.

Другой вариант - использоватьэлемент изображения вместо использования фонового изображения.Элементы изображения по сути занимают место.Ваша обертка не уменьшится до нуля, если в ней все еще будет элемент изображения.Элемент изображения легко масштабировать до размера окна.

...