Question

好，我有一个SVG文件，现在我想制作自己的SVG动画，例如https://jacekjeznach.com（THE J logo）。我搜索了整个互联网，但没有找到解决该问题的单一解决方案，例如如何正确制作线条动画，然后将其填充颜色。

到目前为止，我已经尝试过了，但不幸的是失败了，如果有人一步一步正确地解释了如何做，这将是非常有帮助的。

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
    <style>
       path {
  stroke:#000;
  stroke-dasharray: 2072;
  stroke-width:3;
  animation: my_animation 4s;
  animation-fill-mode: forwards;
  fill: red;
}

@keyframes my_animation{
  0%{
    stroke-dashoffset: 2072;
    fill-opacity: 0;
  }
  80%{
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100%{
    fill-opacity: 1;
  }
}

    </style>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
</body>
</html>

如何使用SVG线和填充动画？

0 个答案: