项目需求：如何将现有百分比圆环进度指示器改为逆时针方向？

Absolutely! You can modify the percentage ring to support values ranging from -100% to 100% and adjust the progress direction to counter-clockwise for positive values (with clockwise progress for negative values to cover the full bidirectional range). Here's a complete, updated implementation with clear explanations:

HTML #

<div class="progress-ring">
  <svg width="120" height="120">
    <!-- Background circle for empty state -->
    <circle class="progress-ring__circle progress-ring__circle--bg" 
            stroke-width="8" fill="transparent" r="52" cx="60" cy="60" />
    <!-- Dynamic progress circle -->
    <circle class="progress-ring__circle progress-ring__circle--progress" 
            stroke-width="8" fill="transparent" r="52" cx="60" cy="60" />
  </svg>
  <div class="progress-ring__text">0%</div>
</div>

CSS #

.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring svg {
  /* Rotate to start progress at the top, flip horizontally to reverse stroke direction (counter-clockwise) */
  transform: rotate(-90deg) scaleX(-1);
}

.progress-ring__circle--bg {
  stroke: #e0e0e0;
}

.progress-ring__circle--progress {
  stroke: #2196F3;
  transition: stroke-dashoffset 0.5s ease-in-out;
  stroke-linecap: round; /* Smooth rounded ends for progress */
}

.progress-ring__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

JavaScript #

function setProgress(percent) {
  const progressCircle = document.querySelector('.progress-ring__circle--progress');
  const radius = progressCircle.r.baseVal.value;
  const circumference = 2 * Math.PI * radius;
  
  // Set dash array to match full circle circumference
  progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
  
  // Calculate stroke offset based on percentage:
  // - Positive %: Counter-clockwise progress (offset decreases from circumference to 0)
  // - Negative %: Clockwise progress (offset increases from circumference to 2*circumference)
  const normalizedProgress = percent / 100;
  let strokeOffset;
  
  if (normalizedProgress >= 0) {
    strokeOffset = circumference * (1 - normalizedProgress);
  } else {
    // For negative values, use absolute value to calculate clockwise progress
    strokeOffset = circumference * (1 + Math.abs(normalizedProgress));
  }
  
  progressCircle.style.strokeDashoffset = strokeOffset;
  document.querySelector('.progress-ring__text').textContent = `${percent}%`;
}

// Example usage (uncomment to test):
// setProgress(50); // Counter-clockwise half circle
// setProgress(-75); // Clockwise three-quarters circle
// setProgress(100); // Full counter-clockwise circle
// setProgress(-100); // Full clockwise circle

• SVG Direction Flip: The transform: rotate(-90deg) scaleX(-1) adjusts the circle so progress starts at the top and reverses the default clockwise stroke direction to counter-clockwise for positive values.
• Bidirectional Logic: Positive percentages trigger counter-clockwise progress by reducing the stroke offset, while negative percentages trigger clockwise progress by extending the offset beyond the full circumference.
• Smooth Animations: The transition property on the progress circle ensures seamless animation between any value in the -100% to 100% range.

内容的提问来源于stack exchange，提问作者Seth Killian