Как реализовать отслеживание начала прогресс бара на SVG окружности?

Необходимо выставлять точку на начале прогресс бара в окружности. Начало прогресс бара может меняться в зависимости от переменной statTime.

Пример в песочнице

    <template>   <div class="progress-circle__container">     <span class="progress-circle__inner">{{ code }}</span>      <svg class="stat-circle"  width="120" height="120">       <circle class="stat-circle__bg" cx="60" cy="60" r="44"/>       <circle         class="stat-circle__progress stat-circle__progress--daily"         v-bind:style='{           strokeDasharray: strokeDasharray,           strokeDashoffset: dailyProgress.strokeDashoffset,           transform: dailyProgress.rotate,           stroke: dailyProgress.color         }'         cx="60"         cy="60"         r="44"/>       <circle         class="stat-circle__progress stat-circle__progress--night"         v-bind:style='{           strokeDasharray: strokeDasharray,           strokeDashoffset: nightProgress.strokeDashoffset,           transform: nightProgress.rotate,           stroke: nightProgress.color         }'         cx="60"         cy="60"         r="44"/>       <circle class="stat-circle__start-point" r="10" cx="20" cy="20"/>     </svg>    </div> </template>  <script> export default {   name: 'stat-circle',   data() {     return {       dailyProgress: {         rotate: '',         strokeDasharray: '',         strokeDashoffset: '',         color: ''       },       nightProgress: {         rotate: '',         strokeDasharray: '',         strokeDashoffset: '',         color: ''       },       circumference: '',       dailyColor: '#10B15A',       nightColor: '#4F3EC8',       nightStart: 23,       nightEnd: 6,     }   },   props: {     startTime: {       type: Number     },     endTime: {       type: Number     },     code: {       type: String     }   },   methods: {     setAllProgress() {       if((this.startTime > this.nightStart && this.startTime < this.nightEnd) ||         (this.endTime > this.nightStart && this.endTime < this.nightEnd) ||         (this.startTime < this.nightStart && this.endTime > this.nightEnd && this.endTime < 12)) {         this.setProgress(this.getPercentTime, this.getFirstPercent, this.dailyProgress, this.dailyColor);         this.setProgress(this.getPercentTimeNight, this.getFirstPercentNight, this.nightProgress, this.nightColor);       } else {         this.setProgress(this.getPercentTime, this.getFirstPercent, this.dailyProgress, this.dailyColor);       }     },     getCircumference() {       const circle = document.querySelector('.stat-circle__bg');       const radius = circle.r.baseVal.value;        this.circumference = 2 * Math.PI * radius     },      setProgress(percentTime, firstPercent, progressBar, color) {       const offset = this.circumference - percentTime / 100 * this.circumference;       const rotate = 360 * firstPercent - 90;        progressBar.strokeDasharray = `$  {this.circumference} $  {this.circumference}`;       progressBar.rotate = `rotate($  {rotate}deg)`;       progressBar.strokeDashoffset = offset;       progressBar.color = color;     }   },   computed: {     strokeDasharray() {       return `$  {this.circumference} $  {this.circumference}`     },      getPercentTime() {       return ((this.endTime - this.startTime) / 12) * 100     },      getPercentTimeNight() {       if (this.endTime <= 6) {         return ((this.endTime - this.nightStart) / 12) * 100       } else {         return ((this.nightEnd - this.nightStart) / 12) * 100       }     },      getFirstPercent() {       return this.startTime / 12     },      getFirstPercentNight() {       return this.nightStart / 12     }   },   mounted() {     this.getCircumference();     this.setAllProgress();   } } </script>  <style lang="scss">   .progress-circle {      &__container{       width: 100%;       max-width: 120px;       max-height: 120px;        position: relative;     }      &__inner {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);        font-size: 28px;        &::before {         content: '';         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);          width: 50px;         height: 50px;          background-color: #2C3144;         border-radius: 100px;         z-index: -1;       }       }   }    .stat-circle {     position: relative;      &__bg {       fill: none;       stroke: #2C3144;       stroke-width: 8;     }      &__start-point {       fill: green;       transform-origin: center;     }      &__progress {       fill: none;        stroke-width: 8.2;       stroke-linecap: round;        transform-origin: center;       transform: rotate(-90deg);        &--night {         stroke-width: 8.8;       }      }   }  </style>