我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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句