vivus.js如何动态设置path
vivus.js是一个svg的库,画了一条直线以后如何设置它变成一个圆或另一个形状。
github文档地址:
https://github.com/maxwellito...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vivus.js"></script>
<style>
#my-svg { width: 100%; height: 100%; position: absolute;}
</style>
</head>
<body>
<svg id="my-svg">
<line id="circle" x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
</body>
</html>
<script>
var _Vivus = new Vivus('my-svg', {duration: 200});
_Vivus.play(function(){
document.getElementById('circle').setAttribute('d','M0,0L200,300')
})
</script>
我这样设置的但是没有动画效果
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论