我要做一些圆形图表，现在我有完整的圆圈与进度条，但不知道为什么我不能使它3/4圆圈和进度条。
代码：

<!-- The HTML structure for the progress bar -->
<div class="progress-container">
  <svg class="progress-bar" width="100%" height="100%" viewBox="0 0 42 42">
    <circle class="progress-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
    <circle class="progress-value" cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
  </svg>
  <div class="progress-text">0%</div>
</div>

/* The CSS styles for the progress bar */
.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
}

.progress-ring {
  stroke: #ddd;
  stroke-width: 2;
  fill: transparent;
}

.progress-value {
  stroke: #3498db;
  stroke-width: 2;
  fill: transparent;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.3s;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #3498db;
}

// The JavaScript code to update the progress bar
const progressContainer = document.querySelector('.progress-container');
const progressBar = progressContainer.querySelector('.progress-bar');
const progressValue = progressBar.querySelector('.progress-value');
const progressText = progressContainer.querySelector('.progress-text');

const updateProgress = (value) => {
  // Update the value of the progress bar
  progressValue.style.strokeDasharray = `${value} 100`;

  // Update the text inside the progress bar
  progressText.textContent = `${value}%`;
}

updateProgress(50); // Set the progress bar to 50%

它看起来是这样的：

但我希望它看起来像这样：

如果有人知道如何重建我的代码，请帮助我。