如何使用 JavaScript 为加载 CSS 的 SVG 背景设置动画答案

【问题标题】：How to animate a CSS-loaded SVG background with JavaScript如何使用 JavaScript 为加载 CSS 的 SVG 背景设置动画
【发布时间】：2019-07-30 03:13:26
【问题描述】：

我有以下 SVG（缩短版）。

.line {
  width: 100%;
  height: 500vh;
  margin-top: 100px;
  opacity: 0.8;
  background:
    linear-gradient(to bottom, #fff, transparent) top/100% 1024px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom/100% 128px no-repeat,
    url(line.svg) top/768px;
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
	 <style>
	 	path {
	 		transition: opacity 512ms ease-in-out;
	 	}

	 	.rise {
	 		opacity: 0.2;
	 	}

	 	.fall {
	 		opacity: 1;
	 	}
	 </style>
<g>
	<path fill="#070707" d="M109.021,87.07c1.871,1.233,1.874,3.713,3.569,5.022c0.051-0.372,0.073-0.78,0.042-1.163l-0.426-0.236
		c2.157-5.078-5.299-7.254-8.281-7.586c-2.127-0.236-4.292-0.489-6.372-1.008c-2.521-0.63-3.054-1.987-4.201-4.195
		c-0.397,5.932,5.381,6.908,9.51,7.333C104.642,85.419,107.502,86.07,109.021,87.07z"/>
	<path fill="#070707" d="M200,199.422c-0.219,0.195-0.438,0.391-0.664,0.58H200V199.422z"/>
</g>
 <script type="text/javascript"><![CDATA[
 		var els = document.querySelectorAll('path')

 		for (var i = 0, n = els.length; i < n; i++) {
 			var el = els[i]
 			animateIn(el, Math.floor(Math.random() * 2048))
 		}

 		function animateIn(el, stagger) {
 			setTimeout(function(){
 				el.classList.add('rise')
 				animateOut(el, 512)
 			}, stagger)
 		}

 		function animateOut(el, stagger) {
 			setTimeout(function(){
 				el.classList.add('fall')
 				animateIn(el, 512)
 			}, stagger)
 		}
 ]]></script>
</svg>

我认为这行不通，但这是代码的要点。基本上，我添加了一些 JavaScript 直接到 SVG，以动画每个单独路径的不透明度进出。我希望它有点“闪耀”。

但是，如果我使用 .line 类设置元素的样式，这将不起作用。它以重复的方式成功地绘制了 SVG，但它不做动画。我想知道如何做到这一点。我不想使用可以直接以类似方式制作动画的纯内联 SVG，因为我想在多个页面上使用此 SVG，并且不想在每个页面上内联加载它.但如果这是唯一的方法，那就太好了。

我需要this之类的东西吗？

基本上我的HTML文档是这样的：

<html>
  <body>
    <section>something</section>
    <section class='line'></section>
    <section>something else</section>
  </body>
</html>

.line 类将 CSS 背景图像设置为 line.svg 文件。

【问题讨论】：

标签： javascript css animation svg

【解决方案1】：

EDIT3（最终版）：我在下面的 EDIT2 中提到的内容是可能的，就在这里，因为我没有你的“line.svg”，我想展示一个有效的 sn- p，我只是将 svg 二进制文件内联到我的 css 中，这应该可以与适当的 svg 文件互换（如：如果 .line 有背景：url("line.svg") 它将与我的例子）

下次请在发布之前发布整个问题。由于问题正在更改，这需要方式进行太多编辑。

@keyframes shine {
  0% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

.line {
  /*transition: opacity 512ms ease-in-out;*/
  animation: shine 1s ease-in-out infinite;

width: 50px;
height: 50px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIHN0eWxlPSIgIiBkPSJNIDQ0Ljg2MzI4MSA3IEwgMzguMTY3OTY5IDcgQyAzNi4zOTQ1MzEgNyAzNSA4LjI1IDM1IDEwIEwgMzUgMTQgTCAxNSAxNCBMIDE1IDEwIEMgMTUgOC4yNSAxMy41ODU5MzggNyAxMS44MTI1IDcgTCA1LjEzNjcxOSA3IEMgMy40MDYyNSA3IDIgOC4zNzUgMiAxMC4xNzU3ODEgTCAyIDM5LjY0MDYyNSBDIDIgNDEuNTU4NTk0IDMuMzgyODEzIDQzIDUuMTEzMjgxIDQzIEwgNDQuODg2NzE5IDQzIEMgNDYuNjE3MTg4IDQzIDQ4IDQxLjU1ODU5NCA0OCAzOS43NjE3MTkgTCA0OCAxMC4xNzU3ODEgQyA0OCA4LjA1ODU5NCA0Ni41OTM3NSA3IDQ0Ljg2MzI4MSA3IFogTSAxNSAzMyBDIDEyLjI0MjE4OCAzMyAxMCAzMC43NTc4MTMgMTAgMjggQyAxMCAyNS4yNDIxODggMTIuMjQyMTg4IDIzIDE1IDIzIEMgMTcuNzU3ODEzIDIzIDIwIDI1LjI0MjE4OCAyMCAyOCBDIDIwIDMwLjc1NzgxMyAxNy43NTc4MTMgMzMgMTUgMzMgWiBNIDM1IDMzIEMgMzIuMjQyMTg4IDMzIDMwIDMwLjc1NzgxMyAzMCAyOCBDIDMwIDI1LjI0MjE4OCAzMi4yNDIxODggMjMgMzUgMjMgQyAzNy43NTc4MTMgMjMgNDAgMjUuMjQyMTg4IDQwIDI4IEMgNDAgMzAuNzU3ODEzIDM3Ljc1NzgxMyAzMyAzNSAzMyBaICI+PC9wYXRoPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
background-size: 100%; }
}

<html>
  <body>
    <section>something</section>
    <section class='line'></section>
    <section>something else</section>
  </body>
</html>

EARLIER（在 Question-er 更新问题之前） 如果我理解您的问题和代码-您希望具有相同的“淡入淡出”效果，但没有内联 javascript。您可以将 js 与 html 分开并添加该 svg 路径 with js。

window.onload=function() {
  var line=document.getElementsByClassName("line")[0];
  console.log(line);
  /* not sure why I had to concatonate the various pieces, prob because of the code snippet editor in SO */
  line.innerHTML='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">'+
'<g>'+
	'<path class="myPath" fill="#070707" d="M109.021,87.07c1.871,1.233,1.874,3.713,3.569,5.022c0.051-0.372,0.073-0.78,0.042-1.163l-0.426-0.236'+
		'c2.157-5.078-5.299-7.254-8.281-7.586c-2.127-0.236-4.292-0.489-6.372-1.008c-2.521-0.63-3.054-1.987-4.201-4.195'+
		'c-0.397,5.932,5.381,6.908,9.51,7.333C104.642,85.419,107.502,86.07,109.021,87.07z"/>' +
	'<path class="myPath" fill="#070707" d="M200,199.422c-0.219,0.195-0.438,0.391-0.664,0.58H200V199.422z"/>'+
'</g>'+
'</svg>';
};

.line {
  /*transition: opacity 512ms ease-in-out;*/
  animation: shine 1s ease-in-out infinite;
}

@keyframes shine {
  0% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

<html>
  <body>
    <section>something</section>
    <section class='line'></section>
    <section>something else</section>
  </body>
</html>

注意：以上是旧的 sn-p，请在相同的答案中向上滚动以获取第一个 sn-p 中的最终答案

EDIT2: ...我相信它可能在没有 js 的情况下是可行的，方法是引入 line.svg 作为 .line 元素的背景并使用我的 css 制作动画它，但它是睡觉时间:)...

【讨论】：

我在文章底部添加了更多内容，解释了我的 HTML 文档的结构。
是的 - 注意到了。我不得不编辑代码和我的 cmets 几次以使我的答案适合修改后的问题，并且（希望）对那些没有看到两个版本的问题的人也有意义。一切都很好，祝你晚安:)
不，我想编辑 SVG 中的各个行。假设 SVG 是钢笔和墨水插图。我想单独为每个笔画设置动画。但我想将它用作 CSS 类，或者以其他方式在外部托管 SVG（即不内联它）。您所描述的只是基本的 HTML 动画，恰好使用 SVG 作为背景图像。非常不同。
这个答案中有 2 个代码 sn-ps，转到第一个（带有 SVG 的猫头鹰图标的那个），它根本没有 JS！任何具有“line”类的东西都会在其中包含 SVG 动画。这回答了你的（修改后的）问题：“......如果我用这个 .line 类为元素设置样式，这不起作用。它以重复的方式成功地绘制了 SVG，但它不做动画。”跨度>
如果您要更改实际的 SVG，即操作和 - 您的问题和示例根本没有反映这一点。这可以（并且应该）用 javascript 来完成。