Question

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

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

我想让它显示在带动画的滚动上。我已经编写了滚动的好回调，现在我不知道如何制作动画。

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

为此，我尝试了以下方法： 1）将width属性设置为我的对象“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

简单的解决方法：将<object>与SVG图像放在包裹<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

如果你想直接与对象互动，你总是可以依靠良好的对象。的javascript：

var i = 0;

var repeat

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

使用动画更改svg的宽度

2 个答案: