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

Question

我想在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>

这是我的js（angular）中的代码，我首先设置svg坐标的初始值。然后我想通过svgLineFunc函数更改它们。

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

    $scope.svgLineFunc = function (newValue) {

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

    };

但是我希望这个改变顺利完成，就像用css转换完成!!!

提前感谢您的帮助。