SVG Circle progress, как запустить счетчик сверху?

Question

Я работаю над созданием индикатора прогресса SVG Circle.

В приведенном ниже фрагменте. Я показываю счетчик рендеринг завершен на 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>

Answer 1

Вы можете использовать transform='rotate(-90 100 100)' на круге #bar, чтобы начать его сверху.

См. Ниже фрагмент:

#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>