SVG路径绘制和擦除动画

SVG path drawing and erasing animation

本文关键字：擦除 动画 绘制 路径 SVG      更新时间：2023-09-26

我正在尝试制作类似的动画

.path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: dash 5s linear infinite;
}
@keyframes dash {
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -300;
    }
}

但问题是IE支持，所以我想用一些JS库来制作动画。我找到的所有库都可以划线，但不能像我想的那样擦除。有人知道什么能帮上忙的吗？我需要IE10+支持

看看d3js

一旦你掌握了如何使用，它几乎是无限的

这个演示特别可能对你有用

希望这能帮助

编辑：这个演示更接近于您正在寻找的

相关文章：