如何动画/使用过渡来裁剪svg-line的长度？

Question

如果我们有一个背景和一个前景线，使用相同的破折号数组，我们可以设置第二个的x2值来获得一个进度条外观图像。

<svg width="1000" height="40">
    <g stroke-width="40" stroke-dasharray="0 5 90 5">
        <line stroke="gray" x1="0" x2="1000" y1="20" y2="20" />
        <line stroke="green" x1="0" x2="750" y1="20" y2="20" />
    </g>
</svg>

但是如果我们更改x2值，它会直接改变大小，则不会使用css transition: all 0.30s;

进行动画处理

使用clippath，transform-scale，transform-translate，但不能让它为它设置动画。

setInterval可以解决它，但宁可有css灵魂。 可以吗？