Animation 需要SVG动画指导

我今天读了这本SVG袖珍指南，从中学到了很多东西，但是。。。它不包括动画。我需要一些指导如何做一个简单的动画。我不需要任何帧之间的过渡，我只想定义帧一的形状，帧二的形状，等等

---

此问题显示了SVG中基于帧的动画的方法。它使用CSS动画，但使用SMIL也可以实现同样的效果。然而，CSS方式在我看来更干净一些

---

这里有另一个答案，这可能会有所帮助：

这并不是我发现的那么好。关键字是“关键帧”，但它显示应用于形状的变换。不在形状之间切换。这是我找到的最接近关键帧的东西：离散calcMode是我需要的，我的意思是“关键帧”。

<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
    <!-- the doctype and svg need to be like this to render in Firefox -->
    <rect width="1080" height="1080" fill="white"/>

<!-- delay frames by waiting 0.5 seconds between frames -->

    <animation frame 1>
        <line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
        <line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
        <circle cx="10" cy="50" r="5" fill="black" />
        <circle cx="75" cy="75" r="5" fill="black" />
        <circle cx="175" cy="475" r="5" fill="black" />
    </animation frame 1>

    <animation frame 2>
        <line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
        <line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
        <circle cx="10" cy="50" r="5" fill="black" />
        <circle cx="75" cy="75" r="5" fill="black" />
        <circle cx="175" cy="475" r="5" fill="black" />
    </animation frame 2>

</svg>

<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
    <rect width="1080" height="1080" fill="white"/>

    <line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
        <animate
            attributeName="x1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="y1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="stroke"
            dur="0.5s"
            values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
            calcMode="discrete"
            repeatCount="1"
        />
    </line>

    <circle cx="50" cy="50" r="5" fill="black" />
    <circle cx="100" cy="100" r="5" fill="black" />
    <circle cx="200" cy="200" r="5" fill="black" />
    <circle cx="350" cy="350" r="5" fill="black" />
    <circle cx="400" cy="400" r="5" fill="black" />

</svg>