SVG描边动画：让静态元素动起来

2022-12-02 23:30:56

SVG 描边动画：让静态元素动起来

揭秘 SVG 描边动画的原理

SVG 描边动画是一种巧妙的技术，它可以让静态的 SVG 元素动起来。它的原理依赖于两个 SVG 属性：stroke-dasharray 和 stroke-dashoffset。

stroke-dasharray 属性定义了一条线的虚线图案，它指定了线段和间隙的长度。stroke-dashoffset 属性则控制虚线图案的起始位置。通过操纵这两个属性，我们可以让线条逐渐显现或消失。

实现 SVG 描边动画

要创建 SVG 描边动画，我们需要先创建一个 SVG 元素，并在其中添加一个路径（path）元素。然后，为路径元素设置 stroke-dasharray 和 stroke-dashoffset 属性。通常，stroke-dasharray 的值会设置为线条的总长度和间隙长度，例如 "10,5"。而 stroke-dashoffset 的值一般设置为线条的总长度，例如 "10"。

下一步，在 CSS 中为路径元素设置动画效果。可以使用 CSS 的 animation 属性，将值设置为 "stroke-dashoffset 1s infinite linear"。这表示线条的起始位置将从线条总长度逐渐减小到 0，动画持续 1 秒，无限重复，且动画效果为线性。

代码示例

<svg width="100%" height="100%">
  <path id="path" d="M 0 0 L 100 100" stroke="#000" stroke-width="5" stroke-dasharray="10,5" stroke-dashoffset="10" />
</svg>

<style>
  #path {
    animation: stroke-dashoffset 1s infinite linear;
  }

  @keyframes stroke-dashoffset {
    from {
      stroke-dashoffset: 10;
    }

    to {
      stroke-dashoffset: 0;
    }
  }
</style>