SVG Circle进度，如何在顶部启动仪表？答案

【问题标题】：SVG Circle progress, how to start the meter at the top?SVG Circle进度，如何在顶部启动仪表？
【发布时间】：2021-11-03 04:34:26
【问题描述】：

我正在构建一个 SVG Circle 进度表。

在下面的sn-p中。我显示仪表渲染完成 20%。问题是我需要仪表从顶部中心开始，而不是像现在的 90 度。如何让 SVG 圆圈进度表从圆圈的顶部/中心开始？

  #svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
    stroke: #311321;
    stroke-width: 1em;
  }
  #svg #bar {
    stroke: red ;
  }
  #cont {
    display: block;
    height: 200px;
    width: 200px;
    margin: 2em auto;
    border-radius: 100%;
    position: relative;
  }
  #cont:after {
    position: absolute;
    display: block;
    height: 160px;
    width: 160px;
    left: 50%;
    top: 50%;
    content: attr(data-pct)"%";
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 100%;
    line-height: 160px;
    font-size: 2em;
  }

<div id="cont" data-pct="20">
   <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" style="stroke-dashoffset: 452.389;"></circle>
   </svg>
</div>

【问题讨论】：

我会将 2 个圆圈放在一个组中并旋转该组 <g transform="rotate(-90 100 100)">
另外 viewPort 也不会做任何事情，你的意思是 viewBox

标签： html css svg

【解决方案1】：

您可以在#bar 圆圈上使用transform='rotate(-90 100 100)' 从顶部开始。

见下面的片段：

#svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
    stroke: #311321;
    stroke-width: 1em;
  }
  #svg #bar {
    stroke: red ;
  }
  #cont {
    display: block;
    height: 200px;
    width: 200px;
    margin: 2em auto;
    border-radius: 100%;
    position: relative;
  }
  #cont:after {
    position: absolute;
    display: block;
    height: 160px;
    width: 160px;
    left: 50%;
    top: 50%;
    content: attr(data-pct)"%";
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 100%;
    line-height: 160px;
    font-size: 2em;
  }

<div id="cont" data-pct="20">
   <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" style="stroke-dashoffset: 452.389;" transform='rotate(-90 100 100)'></circle>
   </svg>
</div>

【讨论】：

【解决方案2】：

我找到的最简单的方法是设置

transform: rotate(-90deg);
transform-origin: 50% 50%;

到 circle#bar 并设置 NEGATIVE stroke-dashoffset，这样它会按照我的需要从顶部逆时针绘制圆圈。

【讨论】：