Animation 如何使用velocityjs设置svg多边形点位置的动画？

我有一个svg，如下所示：

<svg id="baseSplashGradient" width="720px" height="1024px" viewBox="0 0 720 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient x1="41.1044918%" y1="0%" x2="50%" y2="101.663162%" id="linearGradient-1">
                <stop stop-color="#56CCF2" offset="0%"></stop>
                <stop stop-color="#2F80ED" offset="100%"></stop>
            </linearGradient>
        </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="left-background" fill="url(#linearGradient-1)"
                     points="0 0 439.837891 0 720 1024 0 1024"></polygon>
    </g>
</svg>

points="0 0 720 0 720 1024 0 1024"

看起来像这样：

<svg id="baseSplashGradient" width="720px" height="1024px" viewBox="0 0 720 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient x1="41.1044918%" y1="0%" x2="50%" y2="101.663162%" id="linearGradient-1">
                <stop stop-color="#56CCF2" offset="0%"></stop>
                <stop stop-color="#2F80ED" offset="100%"></stop>
            </linearGradient>
        </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="left-background" fill="url(#linearGradient-1)"
                     points="0 0 439.837891 0 720 1024 0 1024"></polygon>
    </g>
</svg>

points="0 0 720 0 720 1024 0 1024"

本质上，使形状成为矩形。使用类似于translateX的东西，我不确定如何与实际要点对话

我可以移动整个svg：

var svg = $('#baseSplashGradient'),
    polygon = svg.find('polygon'),
    points = polygon.attr('points'),
    pointsArray = points.split(' ');

if (polygon.data('animating') === true) {
    //
} else {
    polygon.velocity({
        translateX: '200px'
    }, {
        duration: 500
    });
}

---

但这不是我想要实现的。如有任何建议，将不胜感激

当前需要使用进度回调，并手动更改属性。当Velocity v2发布时，您应该能够直接将其作为属性进行动画制作（免责声明：我是v2的首席开发人员）

当Velocity v2（当前为开发分支）发布后，您将能够更轻松地执行此操作：

polygon.velocity({
   points: ["0 0 439.837891 0 720 1024 0 1024", "0 0 720 0 720 1024 0 1024"]
}, {
   duration: 500
});

---

为什么不直接使用SMIL呢？通过阅读帖子，我以为我已经读到了

已经被弃用了。Chrome弃用了它，然后他们改变了主意。所以现在它不是太美了！动画点正是我要找的。非常感谢你！