svg进度环形图的核心是利用circle元素的stroke-dasharray和stroke-dashoffset属性协同控制线条显示长度，通过css动画改变stroke-dashoffset从周长值过渡到计算后的剩余偏移量，实现进度填充效果；2. 为适配不同半径的环形图，推荐使用css自定义属性定义半径并结合calc()动态计算周长，也可用javascript读取r属性实时设置变量或样式；3. 除线性进度外，css动画还能实现缓动函数变化、颜色渐变、宽度波动、阴影光晕、旋转起始点、数字跳动、图标切换及背景轨迹动画等创意效果，提升视觉表现力。
使用CSS动画绘制SVG进度环形图，核心在于巧妙利用SVG的circle元素以及CSS的stroke-dasharray和stroke-dashoffset属性，配合@keyframes动画来控制线条的显示与隐藏，从而模拟出进度填充的效果。这比想象中要灵活和强大，能做出非常流畅且富有表现力的动画。
解决方案
要实现一个动态的SVG进度环形图，我们通常会用到两个SVG circle元素：一个作为背景轨迹，另一个则用于显示进度。关键在于通过CSS来控制进度圆的stroke-dasharray和stroke-dashoffset属性。
首先，在HTML中定义SVG结构：
立即学习“前端免费学习笔记（深入）”；
0%
接着，是CSS部分。这里面藏着实现动画的秘密：
.progress-circle-container { width: 150px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center;}.progress-circle { transform: rotate(-90deg); /* 让进度从顶部开始 */ width: 100%; height: 100%;}.progress-circle-track { fill: none; stroke: #e6e6e6; stroke-width: 10;}.progress-circle-bar { fill: none; stroke: #4CAF50; /* 进度条颜色 */ stroke-width: 10; stroke-linecap: round; /* 圆头效果，让进度条末端更平滑 */ /* 这里的计算是关键：2 * PI * r = 2 * 3.14159 * 45 ≈ 282.74 */ /* 我们用一个变量来存储周长，方便后续计算 */ --circumference: calc(2 * 3.14159 * 45); /* 假设半径是45 */ stroke-dasharray: var(--circumference); /* 完整的圆周长 */ stroke-dashoffset: var(--circumference); /* 初始时完全隐藏进度条 */ transition: stroke-dashoffset 1s ease-out; /* 平滑过渡动画 */ /* 或者通过 @keyframes 动画来控制 */ /* animation: fill-progress 2s forwards ease-in-out; */}/* 如果要通过 JS 动态设置进度，可以直接修改 --progress 变量 *//* 例如：.progress-circle-bar { stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress, 0))); } *//* 如果使用 @keyframes 动画 */@keyframes fill-progress { from { stroke-dashoffset: var(--circumference); } to { /* 假设进度是 75% */ stroke-dashoffset: calc(var(--circumference) * (1 - 0.75)); }}.progress-text { position: absolute; font-size: 1.5em; font-weight: bold; color: #333;}
这段CSS里，--circumference是一个CSS变量，存储了圆的周长。stroke-dasharray设置成周长，意味着我们有一条和圆周长一样长的虚线段，后面跟着一个0长度的空白。stroke-dashoffset则控制这条虚线段的起始偏移量。当stroke-dashoffset等于周长时，整条虚线被“推”出视图，所以什么也看不到。当它逐渐减小到0时，虚线就完全显示出来，形成一个完整的圆。通过计算calc(var(--circumference) * (1 - 进度百分比))，我们就能精确控制进度条的显示长度。
SVG中的stroke-dasharray和stroke-dashoffset如何协同工作实现进度动画？
在我看来，stroke-dasharray和stroke-dashoffset是SVG线条绘制里最富有魔力的两个属性，它们协同作用，能把一条连续的线段玩出各种花样，尤其是实现这种动态进度条。
简单来说，stroke-dasharray定义了虚线（dash）和间隔（gap）的序列。你可以给它一个或多个数值。如果只给一个值，比如stroke-dasharray: 10，那就意味着10个单位的虚线，然后是10个单位的空白，如此循环。但对于进度条，我们通常只给一个值：圆的周长。比如，一个半径为45的圆，周长大约是282.74。那么stroke-dasharray: 282.74就表示有一条282.74单位长的实线，后面紧跟着一个0单位的空白。这样，理论上这条线就是连续的，因为它没有实际的“间隔”。
而stroke-dashoffset则更像是一个“卷尺”，它控制着这条虚线模式的起始点。想象一下，你有一条无限长的、由虚线和空白组成的图案带子。stroke-dashoffset就是让你把这条带子从某个位置开始“贴”到你的SVG路径上。当stroke-dashoffset的值等于stroke-dasharray定义的虚线长度时，这意味着你把这条“实线段”完全推到了路径的起点之外，所以你看不到它。
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
比如，周长是282.74，你设置stroke-dasharray: 282.74和stroke-dashoffset: 282.74。此时，这条实线段的起点被偏移了282.74单位，刚好完全隐藏了。当你把stroke-dashoffset从282.74动画到0时，这条实线段就从路径的起点开始，逐渐“展开”直到完全显示出来。如果目标是50%的进度，那stroke-dashoffset就应该动画到282.74 * (1 - 0.5)，也就是141.37，这样就只显示了一半的圆。
这种机制的巧妙之处在于，我们并不是真的在“画”线，而是在“揭示”一条已经存在的线。通过控制偏移量，我们能精确地控制这条线的哪一部分是可见的，从而创造出进度条从无到有的视觉效果。
如何确保不同半径的环形图都能正确显示进度动画？
这确实是个实际开发中会遇到的问题。如果你有多个不同大小的进度环，每次都手动去计算周长并写死在CSS里，那简直是噩梦。我的经验是，有几种方法可以优雅地处理这个问题，让不同半径的环形图都能正确且灵活地显示进度动画。
CSS自定义属性（CSS Variables）与calc()的结合：这是我个人最推荐的方式，因为它保持了CSS的纯粹性，并且非常灵活。我们可以在CSS中定义一个变量来存储圆的半径，然后通过calc()函数来计算周长，并将其应用于stroke-dasharray和stroke-dashoffset。
.progress-circle-bar { --radius: 45; /* 定义半径变量 */ --circumference: calc(2 * 3.14159 * var(--radius)); /* 计算周长 */ stroke-dasharray: var(--circumference); stroke-dashoffset: var(--circumference); /* ... 其他样式 ... */}/* 针对特定大小的环形图，只需覆盖 --radius 变量 */.progress-circle-large .progress-circle-bar { --radius: 60;}@keyframes fill-progress { from { stroke-dashoffset: var(--circumference); } to { stroke-dashoffset: calc(var(--circumference) * (1 - 0.75)); }}
这样，你只需要在不同的容器或元素上修改--radius变量，所有相关的计算都会自动更新。这极大地提高了代码的可维护性和复用性。
JavaScript动态计算和设置：如果你的环形图半径是完全动态的，比如用户可以拖动滑块改变大小，或者数据驱动导致半径不确定，那么JavaScript就成了不可或缺的工具。你可以通过JS获取SVG circle元素的半径（r属性），计算出周长，然后将stroke-dasharray和stroke-dashoffset的值直接设置到元素的style属性上，或者更新CSS自定义属性。
const progressBar = document.querySelector('.progress-circle-bar');const radius = parseFloat(progressBar.getAttribute('r')); // 获取半径const circumference = 2 * Math.PI * radius;progressBar.style.setProperty('--circumference', circumference);// 假设要设置 75% 进度const progress = 0.75;progressBar.style.strokeDashoffset = circumference * (1 - progress);
这种方式虽然引入了JS，但它提供了最大的灵活性，能够应对各种复杂的动态场景。
SVG viewBox与相对单位的结合（有限制）：虽然SVG的viewBox属性可以帮助SVG在不同容器大小下进行缩放，但stroke-dasharray和stroke-dashoffset的值仍然是基于用户单位的。也就是说，如果你把viewBox设为0 0 100 100，并且圆的半径是45，那么周长就是2 * PI * 45。即使你把SVG容器放大两倍，这个圆在视觉上变大了，但它的“内部”计算单位仍然是基于100×100的viewBox。所以，这种方法并不能直接解决stroke-dasharray和stroke-dashoffset的动态计算问题，但它能确保SVG整体的缩放比例正确。通常，它会和CSS变量或JS计算结合使用。
在我看来，CSS自定义属性是目前最优雅且纯CSS的解决方案，它在不引入JS的情况下，提供了相当高的灵活性。当需要更复杂的动态交互时，再考虑引入JavaScript进行辅助计算。
除了简单的线性进度，CSS动画还能为环形图带来哪些创意效果？
CSS动画在环形进度图上能做的远不止从0到100%的线性填充。通过一些巧妙的组合和对动画属性的深入理解，我们可以为用户带来更生动、更富有表现力的视觉体验。
非线性缓动效果（Easing Functions）：最直接的升级就是改变animation-timing-function。默认的ease可能有点平淡，但你可以尝试ease-in-out让进度条先慢后快再慢，或者使用cubic-bezier()自定义一个更具弹性的效果。比如，一个cubic-bezier(.17,.67,.83,.67)可能会让进度条在最后“弹跳”一下，模拟出一种完成的喜悦感。这就像在说：“我完成了，而且完成得很漂亮！”
多层动画与叠加效果：我们可以不止动画一个circle。比如：
颜色渐变： 随着进度条的填充，同时动画stroke的颜色，从红色（低进度）渐变到绿色（高进度）。宽度变化： 让进度条的stroke-width在动画过程中逐渐变宽或变窄，制造出一种“成长”或“收敛”的视觉效果。阴影/光晕： 在进度条完成时，给它添加一个box-shadow或filter: drop-shadow()的动画，让它像被点亮了一样，或者发出微弱的光晕，强调完成状态。
起始点与结束点的动态变化：除了stroke-dashoffset，我们也可以动画transform: rotate()来改变进度条的起始点。比如，让进度条在填充的同时，整个环形图缓慢旋转，增加视觉趣味性。或者，在进度完成时，让进度条的末端有一个小小的“收尾”动画，比如短暂地变细或闪烁一下。
文本或图标的联动动画：进度条内部通常会显示百分比数字。我们可以让这个数字也动起来：
数字跳动： 随着进度条的填充，数字从0快速跳变到目标值，而不是简单的静态显示。字体大小/颜色变化： 进度完成时，数字可以放大、加粗或变色，突出最终结果。图标切换： 当进度达到100%时，将百分比数字替换成一个“完成”的打钩图标，并伴随一个缩放或淡入动画。
背景轨迹的动画：不只是进度条，背景轨迹也可以动。比如，让背景轨迹在加载初期有一个短暂的淡入或绘制动画，然后再开始填充进度条，这样整个加载过程会显得更有层次感。
这些创意效果的实现，往往不需要复杂的JavaScript，很多时候纯CSS的@keyframes和transition就能搞定。关键在于跳出“单纯显示进度”的思维定式，把环形图看作一个可以进行多维度视觉表达的画布。
以上就是如何用CSS动画绘制进度环形图 CSS动画实现svg进度动态展示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1093600.html
微信扫一扫 
支付宝扫一扫 
