React中如何实现蓝色圆点沿SVG圆形轨迹跑动？

要做出你想要的蓝色圆点沿圆形轨迹跑动的效果，不用transform:rotate，直接通过CSS动画修改stroke-dashoffset就能实现，核心是让蓝色描边只显示一小段作为圆点，再通过偏移量变化让它沿轨迹移动。

修改后的React组件代码 #

注意把SVG里的class改成React支持的className，同时调整viewBox适配圆形尺寸：

import './loadingicon.css'
const LoadingIcon = () => {
    return (
        <div className='circle'>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
                {/* 虚线轨迹 */}
                <circle
                    className='track'
                    cx="80"
                    cy="80"
                    r="70"
                    fill="none"
                    stroke="#374a67"
                    stroke-dasharray="26.416, 5" 
                    stroke-width="4"
                />
                {/* 跑动的蓝色圆点 */}
                <circle 
                    className="filled" 
                    cx="80" 
                    cy="80" 
                    r="70" 
                    fill="none"
                    stroke="blue"
                    stroke-width="10"
                />
            </svg>
        </div>
    )
}

export default LoadingIcon;

修改后的CSS代码 #

通过stroke-dasharray定义圆点长度，再用动画改变偏移量实现跑动：

.track {
  /* 保留原有轨迹样式 */
}

.filled {
  /* 圆周长≈2×π×70≈439.82，dasharray设置为「圆点长度 + 剩余轨迹长度」 */
  stroke-dasharray: 10, 429.82;
  /* 线性循环动画，2秒跑一圈 */
  animation: runCircle 2s linear infinite;
}

@keyframes runCircle {
  from {
    stroke-dashoffset: 0;
  }
  to {
    /* 偏移量等于周长，保证动画循环无缝衔接 */
    stroke-dashoffset: -439.82;
  }
}

关键说明 #

1. 周长计算：圆形周长公式是2×π×半径，这里半径70，算出周长约439.82，是动画偏移量的核心依据
2. stroke-dasharray：第一个值控制蓝色圆点的长度，第二个值是轨迹剩余部分的长度，这样只会显示一段蓝色描边
3. 动画逻辑：通过stroke-dashoffset从0到负周长的变化，让蓝色描边沿着圆形轨迹循环移动，实现跑动效果

之前用transform:rotate没效果的原因是：直接旋转circle元素时，它的旋转中心就是自身圆心，旋转后位置不会发生偏移，自然看不到跑动的效果。

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