如何使用anime.js 为外部SVG 文件制作动画？答案

【问题标题】：How do you animate an external SVG file with anime.js?如何使用anime.js 为外部SVG 文件制作动画？
【发布时间】：2020-08-10 14:25:01
【问题描述】：

我尝试将 svg 文件包含为 img 元素，但没有成功 - Anime.js 无法识别 svg。然后将其放入object 元素中，这也不起作用。

那么如何建立一个框架来识别 svg 和其中的元素呢？

【问题讨论】：

标签： javascript css animation svg anime.js

【解决方案1】：

您确实需要使用 object 元素，但您不能直接查看 html 文件 - 您需要从服务器提供它，例如使用 Python - 在控制台上做

python -m http.server 8001

然后在http://localhost:8001查看它

这是一个例子 -

<html>
  <!-- note: must run this from a server for svg to load properly -->
  <!-- eg `python -m http.server 8001` -->
  <!-- see https://stackoverflow.com/questions/11434916/javascript-accessing-inner-dom-of-svg -->
  <head>
    <script src="anime.min.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: #222;
      }
      object {
        opacity: 0;
        background: black;
        border: 1px solid #aaa;
      }
    </style>
  </head>
  <body>
    <script>
      function loaded() {

        // get references to svg and subelements

        const svg = document.querySelector("#svg")
        const title = [
          svg.contentDocument.querySelector("#path30"),
          svg.contentDocument.querySelector("#path34"),
        ]
        const subtitle = [
          svg.contentDocument.querySelector("#text54"),
        ]
        const swooshes = [
          svg.contentDocument.querySelector("#path42"),
          svg.contentDocument.querySelector("#path38"),
          svg.contentDocument.querySelector("#path50"),
          svg.contentDocument.querySelector("#path46"),
        ]

        // set some initial values

        svg.style.opacity = 1
        for (const element of title) {
          element.style.opacity = 0
        }
        for (const element of subtitle) {
          element.style.opacity = 0
        }
        for (const element of swooshes) {
          element.style.opacity = 0
        }

        // animate elements

        anime({
          targets: svg,
          delay: 0,
          duration: 2000,
          background: '#ffffff',
          easing: 'linear'
        })

        anime({
          targets: title,
          opacity: 1,
          delay: 0,
          duration: 2000,
          easing: 'linear',
        })

        anime({
          targets: subtitle,
          opacity: 0.9,
          delay: 2000,
          duration: 2000,
          easing: 'linear',
        })

        let startTime = 3000
        for (let i = 0; i < 4; i++) {
          window.setTimeout(() => {
            anime({
              targets: swooshes[i],
              opacity: 1,
              duration: 2000,
              easing: 'linear',
              direction: 'alternate',
              loop: true,
            })
          }, startTime)
          startTime += 500
        }

      }
    </script>

    <!-- must put svg in an object element -->
    <!-- https://stackoverflow.com/questions/28652648/how-to-use-external-svg-in-html -->
    <object data="Emergent_Logo.svg" type="image/svg+xml" id="svg" onload="loaded()"></object>

  </body>
</html>

【讨论】：

【解决方案2】：

animejs 需要原始 svg 代码，而不是通过 iframe/img 标签访问它。

要获取原始代码，只需在其中一个编辑器中打开 .svg 文件，然后将其中的代码复制到您的 html 文件中即可。

它现在应该可以识别代码并根据需要对 svg 进行动画/变形。

【讨论】：