css 如何用SVG创建一个圆形进度条

slmsl1lt 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(178)

我创建了一个角圆形进度条的设计。问题是我想给百分比值动态。我从API得到了动态值，但我不知道如何使用SVG实现它来创建一个圆形进度条。我将分享我的html框架和我使用的css。

.track,
    .filled {
      stroke-width: 10;
      fill: none;
    }
    
    .track {
      stroke: rgba(160, 215, 231, 0.85);
    }
    
    .filled {
      stroke: blue;
      stroke-dashoffset: 202;
      stroke-dasharray: 440;
    }

<div class="col-lg-3">
            <div class="iconbox-singleD7 dashboard-height">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="-35 0 190 190" class="mw">
                <circle class="track" cx="60" cy="60" r="55" />
                <text x="40" y="60" fill="#fff">Patients</text>
                <text x="50" y="75" fill="#fff">{{totalPatient}}</text>
                <circle class="filled" cx="60" cy="60" r="55" />
                <circle cx="30" cy="136" r="5" stroke="blue" stroke-width="3" fill="blue" /><text x="40" y="140" fill="#fff">Male {{malePercentage}}%</text>
                <circle cx="30" cy="152" r="5" stroke="rgba(160, 215, 231, 0.85)" stroke-width="3" fill="rgba(160, 215, 231, 0.85)" /><text x="40" y="155" fill="#fff">Female {{femalePercentage}}%</text>
              </svg>
            </div>
           </div>

我想要的是什么。让我们说我得到一个男性百分比= 70%或任何值从API我想设置进度条根据百分比我从API。我怎样才能做到这一点。我不熟悉SVG。所以任何帮助将不胜感激。谢谢

css

来源：https://stackoverflow.com/questions/75266333/how-to-create-an-angular-circular-progress-bar-using-svg

2条答案

按热度按时间

uqdfh47h1#

你好这里是代码笔：https://codepen.io/Echyzen/pen/LYBraGB

var percentage = 75;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage+b)
   const concernedCircle = document.getElementsByClassName('filled')[0];
  concernedCircle.style.strokeDashoffset = finalOffset;
}

它提取仿射函数的a和B。你必须点击按钮才能执行75%的百分比。
或者使用查询选择器：

var percentage = 70;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage+b)
   const concernedCircle = document.querySelector('.filled');
   concernedCircle.style.strokeDashoffset = finalOffset;
}

赞(0）回复(0）举报 2023-02-01

rpppsulh2#

从我构建的<progress-circle>本地Web组件开始：https://pie-meister.github.io/
它是未经许可的开放Source code;你想怎么用就怎么用。文档在Dev.to

<progress-circle value="100%">Web Components</progress-circle>
<progress-circle value="71%" stroke="red">React</progress-circle>
<progress-circle value="90%" stroke="orange">Others</progress-circle>

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<style>
  progress-circle {
    font-family: Arial;
    width: 180px; /* StackOverflow viewport */
  }
  progress-circle::part(label) {
    font-size:70px;
  }
</style>

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何用SVG创建一个圆形进度条

2条答案

相关问题

热门标签

最新问答