首页 > 其他分享 >手把手使用 SVG + CSS 实现渐变进度环效果

手把手使用 SVG + CSS 实现渐变进度环效果

时间：2024-08-02 22:42:20浏览次数：15  
标签：const 周长 SVG dasharray 251.3274 stroke 手把手 circle CSS

效果

image

轨道

使用 svg 画个轨道

image

  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke="#333"></circle>
  </svg>

简单的说，就是使用 circle 画个圆。需要注意的是，轨道实际是 circle 的 stroke，所以目标 svg 尺寸是 100，则圆的半径是 40，而 stroke 为 10。

接着，按设计，轨道只需要 3/4 个圆即可：

image

<!-- 3/4 track before rotate -->

<!-- circumference = radius * 2 * PI = 40 * 2 * Math.PI = 251.3274 -->
<!-- stroke-dasharray left = circumference * percent = 251.3274 * 0.75 = 188.4955 -->
<!-- stroke-dasharray right = circumference * (1 - percent) = 251.3274 * (1 - 0.75) = 62.8318 -->
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" stroke="#333"></circle>
  </svg>

为了实现这轨道，这个时候需要用到 stroke-dasharray。

为了更好理解这里 stroke-dasharray 的作用，先画一个 line：

image

  <svg viewBox="0 0 300 10" style="display: block;">
    <line x1="0" y1="5" x2="300" y2="5" stroke-width="10" stroke="#333" stroke-dasharray="75,25"></line>
  </svg>

简单的说，上面 line 长 300，每画一段 75 的 stroke，接着留空一段 25，如此重复，正好重复 3 次，刚好铺满了 300 的长度。

应用到 circle 也是如此，只是它是绕着圆，逆时针的画 stroke，类比的举例：

image

stroke-dasharray 的是长度，这里就需要通过计算周长，得出 A 与 E 分别是多长：

周长 = 半径 * 2 * PI = 40 * 2 * Math.PI = 251.3274
A = 周长 * 3/4 = 251.3274 * 0.75 = 188.4955
E = 周长 * 1/4 = 251.3274 * 0.25 = 62.8318

现在还要使用 transform 旋转 135 度以满足需求：

image

<!-- 3/4 track after rotate 135deg -->
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
  </svg>

进度条

先画一个纯色的进度条：

image

body {
  background: black;
}

.gauge {
  position: relative;
  display: inline-block;
}

.gauge > svg {
  width: 200px;
  height: 200px;
}

.gauge > span {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translate(0, -50%);
  font-size: 2em;
}

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.10 = 18.8495 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.10) + 62.8318 = 232.4778 -->
<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="18.8495,232.4778" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle>
  </svg>
  <span>10%</span>
</div>

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.50 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.50) + 62.8318 = 157.0795 -->
<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="94.2477,157.0795" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle>
  </svg>
  <span>50%</span>
</div>

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 1.00 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 1.00) + 62.8318 = 157.0795 -->
<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle>
  </svg>
  <span>100%</span>
</div>

有个很重要的前提，例如图中的 10%、50%、100% 的百分比，是基于那 3/4 轨道的，不是整个圆，所以计算 stroke-dasharray 的时候，实际考虑的是 3 个部分：

image

10%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 0.10 = 18.8495
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 0.10) + 251.3274 * 0.25 = 232.4778

50%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 0.50 = 94.2477
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 0.50) + 251.3274 * 0.25 = 157.0796

100%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 1.00 = 188.4955
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 1.00) + 251.3274 * 0.25 = 62.8318

渐变

image

渐变由最初的从左到右，跟随轨道的 rotate，最后变成从右上到左下，也就意味着，此处的渐变并不是跟随轨道从 0 到 100%，仅实现了类似的感觉的模拟。

image

<!-- progress bar with gradient -->

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.30 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.30) + 62.8318 = 157.0795 -->
<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="56.5486,194.7786" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient)"></circle>
  </svg>
  <span>30%</span>
</div>

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.80 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.80) + 62.8318 = 157.0795 -->
<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="150.7964,100.5308" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient)"></circle>
  </svg>
  <span>80%</span>
</div>

动画

最后，为了实现“效果”中的动画，需要 CSS 配合 JS 实现：

<!-- with animation -->

<div class="gauge">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle>
    <circle id="circle" cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="0,251.3274" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient3)"></circle>
  </svg>
  <span>100%</span>
</div>

#circle {
  transition: all 1s linear;
}

(function() {
  const radius = 40;
  const trackPercent = 0.75
  const circumference = 40 * 2 * Math.PI;
  const percent = 1.00;

  const strokeDasharrayLeft = circumference * trackPercent * percent
  const strokeDasharrayRight = circumference * trackPercent * (1 - percent) + circumference * (1 - trackPercent)

  const circle = document.querySelector('#circle');

  function change() {
    const strokeDasharray = circle.getAttribute('stroke-dasharray').split(',')
    const left = parseFloat(strokeDasharray[0])
    const right = parseFloat(strokeDasharray[1])

    if (left === 0) {
      circle.setAttribute('stroke-dasharray', `${strokeDasharrayLeft},${strokeDasharrayRight}`)
    } else {
      circle.setAttribute('stroke-dasharray', `0,251.3274`)
    }
  }

  setTimeout(function() {

    setInterval(function() {
      change()
    }, 1000)

    change()
  }, 0)
})();

JS 的主要作用就是动态的计算 stroke-dasharray，并配合 CSS 的 transition all 即可实现。

Done!

标签：const,周长,SVG,dasharray,251.3274,stroke,手把手,circle,CSS
From： https://www.cnblogs.com/xachary/p/18339737

相关文章

  • [CSS] max-content, min-content, fit-content
    max-contenthttps://developer.mozilla.org/en-US/docs/Web/CSS/max-contentThe max-content sizingkeywordrepresentsthemaximum intrinsicsize ofthecontent.Fortextcontentthismeansthatthecontentwillnotwrapatallevenifitcausesoverflows.......
  • HTML5+CSS3笔记（Xmind格式）：第一天
    Xmind鸟瞰图：文字总结：1.新增语义化标签：-header：定义文档的页眉,用来表示页面的头部。-nav：定义导航链接的部分nav元素代表页面中的导航，其中的导航元素链接到其他页面或当前页面的其他部分。-main：主体信息-aside:侧边栏-article：article元素表示文档、页面或应用程......
  • 08HTML+CSS
    昨天完成了一个小练习，将之前学习的内容都整合到一起了。1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0......
  • CSS背景图片小调整
    添加背景图片，但是背景图片太小了（图片只是测试图片，实际工作中是不知道什么颜色的背景有很多logo的图片）background-image:url('../assets/images/test.jpg');background-repeat:no-repeat;background-size:contain;background-position:center;背景图片如下由......
  • 初识CSS
    文章目录CSS是什么基本语法规范引入方式内部样式表行内样式表外部样式代码风格选择器的种类基础选择器：单个选择器构成标签选择器类选择器id选择器通配符选择器小结复合选择器：把多种基础选择器综合运用起来后代选择器伪类选择器链接伪类选择器:force伪类选择器小结......
  • vue集成svg大图拖拽无限放大缩小
        vue项目中根据实际CAD图为参考，以及参看项目实际现场，手动绘制了一张线体、堆垛机、库区货架svg图，集成到vue页面中，svg图中可以交互接收C#发送过来的singalR实时数据。接收singalR的实时数据并显示到vue中，这里不作展开讲，可以参看笔者另一篇文章《vue若依集成C#的singalR接......
  • SVG 图片引入与导出技术详解
    SVG图片引入与导出技术详解SVG基础概念`<image>`元素示例一：在SVG中引入外部图片代码示例说明示例二：使用`preserveAspectRatio`代码示例说明示例三：动态加载图片代码示例说明示例四：SVG内部图片导出代码示例说明实际工作开发中的使用技巧1.响应式图像2.动......
  • css 文字边框
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>OpacityFadeAnimation</titl......
  • 《CSS创意项目实战指南》：点亮网页，从实战中掌握CSS的无限创意
    CSS创意项目实战指南在数字时代，网页不仅是信息的载体，更是艺术与技术的融合体。通过CSS，你可以将平凡的网页转变为引人入胜的视觉盛宴，让用户体验跃升至全新高度。《CSS创意项目实战指南》正是这样一本引领你探索CSS无限可能的实战宝典。一、启航CSS创意之旅本书精心设计了12......
  • css标签样式
    //绿色.text{background-color:#06a18d;color:#fff;letter-spacing:0;line-height:16px;padding:02px;text-align:center;position:absolute;width:50px;height:20px;line-height:20px;top:-15px;right:-240px;border-......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99