Jquery 如何平滑地更改svg元素的x坐标？

我想在2秒内更改svg行的x1和x2。我不知道怎样才能完成这个转变。你能帮我吗？：）
以下是我的svg元素：

 <svg height="50" width="1400">
   <line x1="{{xValue}}" y1="{{yValue}}" x2="{{x2Value}}" y2="{{y2Value}}" style="stroke:rgb(255, 0, 0);stroke-width:2;transform: "></line>
</svg>

但是我希望这个改变能像css转换一样顺利完成

---

提前感谢你的帮助

jquery

和

angularjs

都有可以使用的

animation

方法。如果您可以制作一个示例，也许我们可以帮助您使用代码

jquery

和

angularjs

都有您可以使用的

animation

方法。如果您能制作一个示例，也许我们可以帮助您编写代码

    $scope.xValue = 40;
    $scope.yValue = 15;
    $scope.x2Value = 140;
    $scope.y2Value = 15;

    $scope.svgLineFunc = function (newValue) {

        $scope.xValue = newValue;
        $scope.x2Value = newValue + 140;

    };