VivusJS 动画调用正确，但视觉上没有任何反应（或发生得太快而无法发现）

Question

最近开始学习JavaScript，决定看看一些动画，然后我发现了VivusJS。我得到了一个简单的 SVG 图像来做一些测试，看看它是如何工作的。我正在尝试使用最简单的示例，但似乎什么也没有发生。

控制台没有错误，当我调试时，据我所知，一切似乎都很好。 console.table(myVivus.map) 似乎也打印了正确的信息，但在一天结束时，没有动画发生。我不知道是否一切正常，是否说动画真的很快，或者我应该在我的代码中添加其他东西。

这是我的（style.css 是空的）：

JAVASCRIPT:

const myVivus = new Vivus ('my-svg', { type: 'delayed', duration: 200, animTimingFunction: Vivus.EASE });
myVivus.play();

console.table(myVivus.map);

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <title>My Page</title>
    </head>
    <body> 

      <svg id="my-svg" enable-background="new 0 0 511.814 511.814" height="512" viewBox="0 0 511.814 511.814" width="512" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m439.015 45.763h-22.922c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h22.922c13.265 0 24.057 10.792 24.057 24.057v387.937c0 13.265-10.792 24.058-24.057 24.058h-366.216c-13.265 0-24.057-10.792-24.057-24.058v-47.962c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v47.962c0 21.537 17.521 39.058 39.057 39.058h366.217c21.536 0 39.057-17.521 39.057-39.058v-387.937c-.001-21.536-17.521-39.057-39.058-39.057z"/>
          <path d="m41.242 400.332c4.143 0 7.5-3.358 7.5-7.5v-308.012c0-13.265 10.792-24.057 24.057-24.057h311.333c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-208.227c-.253-9.135-3.118-17.626-7.877-24.754h281.224c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-297.428c-6.801-3.82-14.636-6.009-22.976-6.009-25.518 0-46.346 20.411-47.048 45.763h-9.001c-21.536 0-39.057 17.521-39.057 39.057v308.012c0 4.142 3.357 7.5 7.5 7.5zm87.606-385.332c17.247 0 31.353 13.683 32.048 30.763h-64.096c.695-17.08 14.8-30.763 32.048-30.763z"/>
          <path d="m398.239 135.676c-1.897-4.79-5.966-8.465-10.883-9.831-87.649-24.332-176.113-24.333-262.931-.002-4.899 1.372-8.954 5.044-10.847 9.823-13.163 33.249-19.629 68.973-19.219 106.178.386 34.988 6.877 72.48 19.293 111.434 1.646 5.167 5.732 9.175 10.929 10.722 43.25 12.881 86.956 19.321 130.824 19.321s87.898-6.442 131.771-19.324c5.227-1.534 9.335-5.548 10.99-10.737 12.421-38.949 18.915-76.436 19.301-111.418.411-37.203-6.058-72.922-19.228-106.166zm-67.397-6.921c10.417 1.698 20.83 3.747 31.233 6.151v220.305c-10.407 2.553-20.82 4.732-31.233 6.538zm-15 235.336c-10.413 1.447-20.825 2.521-31.232 3.22v-243.778c10.41.655 20.822 1.662 31.232 3.021zm-119.87-237.606c10.398-1.351 20.81-2.348 31.232-2.991v243.877c-10.425-.68-20.838-1.738-31.232-3.173zm-15 235.38c-10.433-1.808-20.846-3.997-31.233-6.568v-220.446c10.392-2.415 20.804-4.471 31.233-6.171zm-53.026-13.142c-24.786-77.759-24.923-145.645-.421-207.535.178-.448.531-.785.946-.901 2.088-.585 4.178-1.144 6.268-1.701v212.731c-1.96-.556-3.919-1.111-5.877-1.694-.43-.128-.78-.473-.916-.9zm114.259 19.368v-245.278c4.456-.129 8.913-.209 13.371-.209 4.677 0 9.354.084 14.033.226v245.234c-4.735.155-9.469.245-14.201.244-4.403.001-8.804-.083-13.203-.217zm141.672-19.391c-.137.429-.491.775-.925.902-1.959.575-3.918 1.123-5.877 1.671v-212.66c2.09.551 4.18 1.105 6.269 1.685.417.116.772.453.95.902 24.513 61.882 24.377 129.756-.417 207.5z"/>
          <path d="m439.595 336.986c.075.002.15.003.225.003 4.04 0 7.373-3.214 7.493-7.279 2.28-77.417-.697-155.876-8.853-233.203-.622-5.884-5.35-10.547-11.241-11.089-114.097-10.486-229.375-10.487-342.629-.002-5.892.545-10.616 5.213-11.234 11.099-12.76 121.718-12.758 244.397.004 364.628.613 5.78 5.252 10.433 11.032 11.063 58.533 6.375 116.662 9.563 174.007 9.563 57.289 0 113.795-3.182 169.098-9.546 5.743-.661 10.35-5.314 10.955-11.062 3.468-32.866 6.031-66.292 7.619-99.349.199-4.137-2.994-7.652-7.131-7.851-4.174-.206-7.654 2.994-7.852 7.131-1.542 32.091-4.011 64.532-7.341 96.461-108.291 12.302-221.199 12.288-335.688-.038-12.362-117.848-12.364-238.057-.003-357.355 110.98-10.146 223.903-10.144 335.706.005 7.919 75.984 10.798 153.05 8.557 229.104-.122 4.14 3.136 7.595 7.276 7.717z"/>
          <path d="m106.346 415.458c0 17.959 14.61 32.569 32.569 32.569s32.569-14.61 32.569-32.569-14.61-32.569-32.569-32.569-32.569 14.611-32.569 32.569zm50.139 0c0 9.688-7.882 17.569-17.569 17.569s-17.569-7.881-17.569-17.569 7.882-17.569 17.569-17.569 17.569 7.882 17.569 17.569z"/>
          <path d="m372.898 382.889c-17.959 0-32.569 14.61-32.569 32.569s14.61 32.569 32.569 32.569 32.569-14.61 32.569-32.569-14.61-32.569-32.569-32.569zm0 50.139c-9.688 0-17.569-7.881-17.569-17.569s7.882-17.569 17.569-17.569 17.569 7.881 17.569 17.569-7.881 17.569-17.569 17.569z"/>
          <path d="m231.276 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m199.813 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m265.538 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m297.001 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m173.878 444.124v1.198c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-1.198c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5z"/>
        </g>
      </svg>

      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
      <script src="js/main.js"></script>
    </body>
</html>

如有任何帮助，我们将不胜感激！

Answer 1

看来我遇到了与中相同的问题。我在 <svg>.

中缺少 stroke 属性

在那里，在执行此操作后，动画发生并按预期工作。为了删除 "original lines" 并仅显示 stroke，我还必须添加另一个名为 fill 的属性并将其设置为 none.

所以最后的结果是：<svg stroke="red" fill="none">，例如

VivusJS 动画调用正确，但视觉上没有任何反应（或发生得太快而无法发现）

VivusJS animation called properly, but nothing visually happens (or happens too fast to spot)

javascript

animation

svg

vivus