SVG折线图动画

Question

我想对滚动条上的线形进行动画处理。我确实有多个线形，并且我希望标记也可以动画。

我已经发现，您可以使用path或strock-dasharray轻松设置stroke-offset的动画，并使用CSS @keyframes进行动画处理。但是，这不适用于我的线形...（找不到任何移出物）。

这是我到目前为止的svg：

<svg width='100%' height='100%' viewBox='0 0 1024 65'>
    <g class='line-bar'>
        <rect class='background' fill='#ddd' width='100%' height='25'></rect>
        <rect class='bar' fill='#4287f5' width='90%' height='25'></rect>
    </g>
    <g class='line'>
        <rect text-anchor='' fill='#4287f5' x='1022px' y='0' width='2px' height='35'></rect>
    </g>
    <g text-anchor='desc'>
        <text text-anchor='start' fill='#4287f5' x='0' y='60'></text>
        <text text-anchor='end' fill='#4287f5' x='1024px' y='40'>100%</text>
    </g>
</svg>

致以问候，谢谢