html函数如何制作环形进度条 html函数SVG图形的内联应用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html函数如何制作环形进度条 html函数SVG图形的内联应用

2025-10-16

浏览次数：次

返回列表

答案：通过HTML内联SVG结合J*aScript控制stroke-dashoffset实现环形进度条，利用circle元素绘制背景和进度圆，用stroke-dasharray与stroke-dashoffset配合周长计算进度显示，通过J*aScript动态更新偏移值和文本内容，并添加CSS过渡动画使变化平滑，rotate(-90deg)使进度从顶部开始，最终实现轻量可复用的环形进度条组件。

html函数如何制作环形进度条 html函数svg图形的内联应用

制作环形进度条可以通过 HTML 结合 SVG 内联实现，无需依赖外部文件，直接在 HTML 中使用 SVG 绘制图形，并通过 J*aScript 动态控制进度。下面详细介绍如何用内联 SVG 创建一个可自定义的环形进度条。

1. SVG 环形进度条的基本结构

SVG 的元素结合描边（stroke）和描边偏移（stroke-dasharray 与 stroke-dashoffset）可以实现环形进度效果。原理是绘制一个圆形轮廓，然后通过虚线描边控制可见部分长度，模拟进度。

<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- 背景圆 -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#e6e6e6" stroke-width="10"/>
<p><!-- 进度圆 -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#4caf50"
stroke-width="10" stroke-dasharray="314" 
stroke-dashoffset="314" class="progress-circle"/></p><p><!-- 显示文字 -->
<text x="60" y="60" text-anchor="middle" dominant-baseline="central" 
font-size="20" fill="#333">0%</text>
</svg></p>

说明：

r="50"：半径为 50，圆心在 (60,60)，因此周长 = 2πr ≈ 314
stroke-dasharray="314"：设置虚线总长度等于周长
stroke-dashoffset：初始为 314 表示无显示；值越小，显示越多

2. 使用 J*aScript 控制进度

通过函数动态计算 dashoffset 并更新文本，实现进度变化。

function setProgress(percent) {
  const circle = document.querySelector('.progress-circle');
  const text = document.querySelector('text');
  const offset = 314 * (1 - percent / 100);
  circle.style.strokeDashoffset = offset;
  text.textContent = percent + '%';
}

调用示例：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

setProgress(75); // 设置为 75%

3. 添加样式和动画效果

可以在 CSS 中添加过渡动画，让进度更平滑。

.progress-circle {
  transition: stroke-dashoffset 0.8s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

说明：

transition 让描边变化有动画
rotate(-90deg) 使进度从顶部开始

4. 完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    svg { display: block; margin: 20px auto; }
    .progress-circle {
      transition: stroke-dashoffset 0.8s ease;
      transform: rotate(-90deg);
      transform-origin: center;
    }
  </style>
</head>
<body>
<p><svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50" fill="none" stroke="#e6e6e6" stroke-width="10"/>
<circle cx="60" cy="60" r="50" fill="none" stroke="#4caf50"
stroke-width="10" stroke-dasharray="314" 
stroke-dashoffset="314" class="progress-circle"/>
<text x="60" y="60" text-anchor="middle" dominant-baseline="central" 
font-size="20" fill="#333">0%</text>
</svg></p><p><script>
function setProgress(percent) {
const circle = document.querySelector('.progress-circle');
const text = document.querySelector('text');
const offset = 314 * (1 - percent / 100);
circle.style.strokeDashoffset = offset;
text.textContent = percent + '%';
}</p><p>// 示例：设置进度
setProgress(60);
</script></p><p></body>
</html></p>

基本上就这些。通过内联 SVG 和简单的 J*aScript 函数，就能实现一个轻量、可复用的环形进度条，适合嵌入网页任意位置，无需额外资源加载。

以上就是html函数如何制作环形进度条 html函数SVG图形的内联应用的详细内容，更多请关注其它相关文章！

# 自定义 # html网站建设 # 营销方案推广手段 # 江干区网站建设平台 # 大同网站长尾关键词优化 # 新疆seo优化合作 # 福田自动网站推广平台 # 嘉兴网站建设中的热点 # 推广校园网站ppt # 饰品网站怎么做推广营销 # 南昌抖音关键词排名报价 # 详细介绍 # 解决问题 # html # 中文网 # 可以通过 # 相关文章 # 就能 # 复用 # 显示效果 # 进度条 # svg # java # javascript # css # html函数