当前位置: 首页> 健康> 母婴 > H5 Svg 半圆圆环占比图

H5 Svg 半圆圆环占比图

时间:2025/7/9 6:29:21来源:https://blog.csdn.net/linyisonger/article/details/140478665 浏览次数:0次

效果图
在这里插入图片描述
主逻辑

/* 虚线长度 */
stroke-dasharray  
/* 偏移 */
stroke-dashoffset 

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./assets/global.css"><style>.circle-progress-bar {--width: 300px;--stroke-width: 12px;--height: calc((var(--width) + var(--stroke-width)) / 2);width: var(--width);height: var(--height);overflow: hidden;position: relative;}.circle-progress-bar .circle-progress-text {font-size: 30px;position: absolute;bottom: 0px;width: 100%;left: 50%;transform: translateX(-50%);text-align: center;}.circle-progress-bar .circle-progress-svg {width: var(--width);height: var(--width);transform: rotate(180deg);}.circle-progress-bar .circle-progress-circle {/* 周长 */stroke-dasharray: 628;/* 偏移 */stroke-dashoffset: 333;}</style>
</head><body><div class="circle-progress-bar"><svg class="circle-progress-svg"><circle class="circle-progress-circle-back" stroke-linecap="round" cx="150" cy="150" r="144"fill="transparent" stroke-width="12" stroke="grey" /><circle class="circle-progress-circle" stroke-linecap="round" cx="150" cy="150" r="144" fill="transparent"stroke-width="12" stroke="grey" /></svg><div class="circle-progress-text">60%</div></div><script type="module">let circleProgressBarDom = document.querySelector('.circle-progress-bar')               // 整体的容器let circleProgressCircleDom = document.querySelector('.circle-progress-circle')         // 前面弧线DOMlet circleProgressCircleBackDom = document.querySelector('.circle-progress-circle-back')// 后面弧线DOMlet circleProgressTextDom = document.querySelector('.circle-progress-text')             // 文字DOMlet width = 200;                            // 盒子宽度let strokeWidth = 20                        // 线宽let r = width / 2 - strokeWidth / 2         // 半径let perimeter = (r * 2 * Math.PI).toFixed(0)// 周长let ratio = .66;                            // 占比 小数let backgroundColor = 'rgb(168, 168, 168)'  // 后面弧线的颜色let color = 'rgb(255, 181, 54)'             // 前面弧线的颜色// 设置宽度、线宽circleProgressBarDom.setAttribute('style', `--width: ${width}px; --stroke-width: ${strokeWidth}px`)// 设置中心点、半径、线宽、占比、颜色circleProgressCircleBackDom.setAttribute('cx', width / 2)circleProgressCircleBackDom.setAttribute('cy', width / 2)circleProgressCircleBackDom.setAttribute('r', r)circleProgressCircleBackDom.setAttribute('stroke-width', strokeWidth)circleProgressCircleBackDom.setAttribute('style', `stroke-dasharray: ${perimeter};stroke-dashoffset: ${perimeter / 2 * 0 + perimeter / 2}`)circleProgressCircleBackDom.setAttribute('stroke', backgroundColor)// 设置中心点、半径、线宽、占比、颜色circleProgressCircleDom.setAttribute('cx', width / 2)circleProgressCircleDom.setAttribute('cy', width / 2)circleProgressCircleDom.setAttribute('r', r)circleProgressCircleDom.setAttribute('stroke-width', strokeWidth)circleProgressCircleDom.setAttribute('style', `stroke-dasharray: ${perimeter};stroke-dashoffset: ${perimeter / 2 * (1 - ratio) + perimeter / 2}`)circleProgressCircleDom.setAttribute('stroke', color)// 设置文字circleProgressTextDom.textContent = ratio * 100 + '%'</script></body></html>

在线预览
https://linyisonger.github.io/H5.Examples/
源码仓库
https://github.com/linyisonger/H5.Examples.git

关键字:H5 Svg 半圆圆环占比图

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: