svg怎么在html中显示(html svg生成环形进度条的实现方法)
类别:Web前端 浏览量:690
时间:2021-10-12 00:24:28 svg怎么在html中显示
html svg生成环形进度条的实现方法之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:
代码非常简单:
<svg width="150px" height="150px" class="svg"> <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/> <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" /> </svg>
为了便于演示,我们先用css动画控制:
svg { transform: rotate(-90deg); } .progress { animation: rotate 1500ms linear both; } @keyframes rotate { from { stroke-dashoffset: 471px; } to { stroke-dashoffset: 0px; } }
实现原理
实现原理非常简单,就是应用svg的stroke-dashoffset和stroke-dasharray属性。
stroke-dasharray
官方解释为可控制用来描边的点划线的图案范式,即定义虚线每段长度即虚线间间隔,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。
stroke-dashoffset
标识的是整个路径的偏移值。
通过控制虚线的间隔与偏移值,便可以行程各种各样的线条动画,当然我们还可以通过js控制,如下:
let path = document.querySelector('#path'); // 可获取路径的长度 let len = path.getTotalLength(); path.style.cssText = `stroke-dasharray:"${number}"`;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5中的语义化标签有哪些(详解HTML5常用的语义化标签)
- jquery获取outerhtml
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- html5 meta标签
- html标签session什么意思(在html页面中取得session中的值的方法)
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- 用html制作一个简易小游戏(Html5写一个简单的俄罗斯方块小游戏)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- html5开发图片(HTML5开发动态音频图的实现)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- HTML中h1到h6标签
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- dedecms更新后设置空白(dedecms如何去掉首页index.html的方法)
- 10句英语常用(英语常用900句)
- 爱情能当饭吃吗(爱情能当饭吃吗说说)
- 白T恤穿法(白t恤)
- 你怎么忘了是说先爱我(你怎么忘了如何爱我)
- 做技术难吗(技术难不难)
- 林心如是谁(林心如是谁演的)
热门推荐
- docker多个端口怎么分(Docker多个容器不能有相同端口号的处理方案)
- php中最常用的标记符(php中目录操作opendir、readdir及scandir用法示例)
- web服务器和http服务器的区别(浅谈WEB服务器、应用程序服务器、HTTP服务器区别)
- 三大云主机的最大区别(服务器之家推荐几款免费云主机体验)
- django admin 开发实例(Django给admin添加Action的步骤详解)
- 修改sqlserver数据库名称步骤(SQL server数据库创建代码 filegroup文件组修改的示例代码)
- pyqt5界面绘图(PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形)
- php执行语句(PHP goto语句用法实例)
- ASP.NET Web API中参数的传递
- django url配置失效(解决Django生产环境无法加载静态文件问题的解决)