如何使用JavaScript為CSS加載的SVG背景設置動畫

Question

我有以下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>

我認為這行不通，但這是代碼的要旨。 基本上，我直接在SVG中添加了一些JavaScript，以動畫化每個單獨路徑的進出透明度。 我希望它有點“閃閃發光”。

但是，如果我使用此.line類設置元素的樣式，則此方法將無效。 它以重復的方式成功繪制了SVG，但沒有進行動畫處理。 我想知道如何做到這一點。 我不想使用純內嵌的SVG，我可以用類似的方式直接對其進行動畫處理， 因為我想在多個頁面上使用此SVG，並且不想在每個頁面上內聯加載。 但是，如果那是唯一的方法，那就知道了。

我需要像這樣？

基本上我的HTML文檔是這樣的：

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

.line類將CSS背景圖像設置為line.svg文件。

Answer 1

EDIT3（FINAL）：在下面的EDIT2中我提到的都是可能的，在這里，因為我沒有您的“ line.svg”，並且我想顯示一個有效的代碼段，所以我只是將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,+PC9wYXRoPjwvZz48L3N2Zz4=') 50% 50% no-repeat; background-size: 100%; } }

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

更早（在Question-er更新問題之前）如果我理解您的問題和代碼-您希望具有相同的“淡入和淡出”效果，但沒有內嵌javascript。 您可以將js與html分開，並使用js添加該svg路徑。

 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>

注意：以上是OLD摘錄，請在相同答案中向上滾動以獲得第一個摘錄中的最終答案

EDIT2： ...我相信如果沒有js，將line.svg用作.line元素的背景並使用我的CSS對其進行動畫處理，可能是可行的，但這是睡覺的時間了：）...

如何使用JavaScript為CSS加載的SVG背景設置動畫

問題描述

1 個解決方案

解決方案1
0 2019-07-29 06:14:03

如何使用JavaScript為CSS加載的SVG背景設置動畫

問題描述

1 個解決方案

解決方案1 0 2019-07-29 06:14:03

解決方案1
0 2019-07-29 06:14:03