使用动画更改svg的宽度

西德尼

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?),或者如何解决此问题?我想要一个简单的解决方案,不要打扰很多行,也不需要任何插件。我敢肯定,可以轻而易举地解决这个问题。

阿里西奥斯

简单的解决方法:将<object>SVG图片和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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章