我有以下 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 文件。
最佳答案
EDIT3(最终版本):我在下面的 EDIT2 中提到的是可能的，这里是，因为我没有你的“line.svg”，我想展示一个工作片段，我只是将 svg 二进制文件内联到我的 css 中，这应该可以与适当的 svg 文件互换(如:如果 .line 有 background: 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(在提问者更新问题之前) 如果我理解你的问题和代码 - 你想要具有相同的“淡入淡出”效果但没有内联 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>EDIT2: ...我相信它可能在没有 js 的情况下可行，方法是引入 line.svg 作为 .line 元素的背景并使用我的 css 进行动画处理它，但现在是 sleep 时间 :)...
关于javascript - 如何使用 JavaScript 为加载 CSS 的 SVG 背景设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57247638/