用动画改变 svg 的宽度

Question

我在这个对象中有一个svg 图像：

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg"></object>

我想让它出现在带有动画的滚动条上。我已经为滚动编写了良好的回调，现在我对如何制作动画感到困惑。

动画将是：开始时，svg 的宽度为 0，当触发回调时，svg 现在采用其正常大小的 100%。动画应该需要 3 秒，在这 3 秒内，我们可以看到图像的大小从 0 变为 100%。

为此，我尝试了以下方法： 1) 将我的对象“firstrule”的宽度属性设置为 0%

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg" width="0%"></object>

以及 2) 使用 jquery 触发动画

$('#firstrule').animate({'width':'100%'},3000);

它不起作用，我在浏览器的控制台上收到此错误：TypeError: Cannot set property 'cur' of undefined

您是否知道另一种解决方案（可能使用 CSS3？），或者如何解决这个问题？我想要一个简单的解决方案，不要打扰很多行，也不要使用任何插件。我很确定可以轻松克服这个问题。

Answer 1

简单的解决方法：将带有 SVG 图像的 <object> 放在包装 <div> 中。然后为容器而不是对象设置动画。

<style>
    #wrapper { width: 0; }
    #firstrule { width: 100%; height: 100%; }
</style>

<div id="wrapper">
    <object id="firstrule" 
        type="image/svg+xml" 
        data="/assets/rules/pertinance.svg">
    </object>
</div>

<script>
    function animate() {
        $("#wrapper").animate({ width: "100%" }, 3000);
    }
</script>

JSFiddle

Answer 2

如果你想直接与对象交互，你总是可以依靠好的 ol' javascript：

变量 i = 0;

变量重复

function animate() {


    repeat = setInterval(function () {
        add();
    }, 1);

    function add() {
        document.getElementById("firstrule").style.width = i + '%';
        document.getElementById("firstrule").style.height = i + '%';
        i++;
        if (i >= 100) {
            clearInterval(repeat);
        }
    }


}

JSFIDDLE