SVG线条动画淡入背景图像？

Question

我有一个 SVG 动画横幅，我想将其淡化为下面的 jpg 图像。 svg 横幅消失了，但背景图像的大小不同，而且它也会消失，这是我不想要的。

我制作了一个带有黑色 bg 的 svg 线条动画，当动画完成时它会消失，但我想在动画和黑色 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>

.center-div black bg 和 svg 线正常工作并正确淡入淡出。背景图像在它们褪色后显示，但不会填充黑色 bg div 所做的空间 - 它更小，它不居中，而且它也会消失。我不希望它褪色。它也不像黑色 div 和线条动画那样响应。

Answer 1

背景消失的原因是，一旦你把它里面占用空间的东西去掉，它就会缩小到什么都没有。通过为其设置宽度和高度，背景在淡入淡出后仍然存在。

背景图片没有填充矩形的原因是你没有缩放它。

在此处查看小提琴：https://jsfiddle.net/a8mu9z0v/

我用过

background-size: cover;

但不同的缩放方法可能更适合您。

编辑：

使背景图像具有响应性取决于它应该缩放的方向。

如果您在我的示例中更改了包装器的宽度，但将高度保留为固定值，它将缩放背景图像以适应宽度，但在缩放后的图像超出范围。

width: 100%;
height: 200px;

如果将背景大小更改为 100%，它会自行缩放到包装器的边界，但不会保持其纵横比：

background-size: 100% 100%; 

如果你想为包装器保持一定的纵横比，那么有一些 css 技巧可以帮助你做到这一点，你可以在其他地方看到。

另一种选择是使用图像元素而不是使用背景图像。图像元素本质上会占用空间。如果它里面仍然有一个图像元素，你的包装器就不会缩小到零。将图像元素缩放到窗口大小很容易。