Javascript 如何在html5中从js文件动态添加Svg图像

我的设想是

我有24个svg图像，当加载js时，我可以显示第一个svg图像，但是过了一段时间，我应该删除/清空第一个svg图像，并且必须添加第二个svg。直到添加了最后一个svg图像

<div id="svgId" style="width: 660px; height: 463px; left: 84px; top: 31px;">

<object type="image/svg+xml" data="resources/images/small_0.svg"></object>

</div>

---

请记住，它应该在Chrome 26+IE10 Ipad6和Windows Surface RT中工作，假设您的24个图像名称是

small\u 0.svg

到

small\u 23.svg

，请尝试以下操作：

var image = 0;
function changeImage() {
    image++;
    if (image < 24) {
        setTimeout(function() {
            $('#svgId object').attr('data', 'resources/images/small_' + image + '.svg');
            changeImage();
        }, 2000);
    }
}
changeImage();

var-image=0；
函数changeImage（）{
图像++；
如果（图像<24）{
setTimeout（函数（）{
$（'svgId object'）.attr（'data'，'resources/images/small'+image+'.svg'）；
changeImage（）；
}, 2000);
}
}
changeImage（）；