HTML/CSS中SVG圆形加载器无法显示的问题求助

你的circle显示为0x0的点，核心原因是SVG的<circle>标签不支持width和height属性，必须用r（半径）来定义大小。另外还有几个细节问题导致渲染异常，以下是分步修复：

1. 修正HTML中circle的属性 #

把无效的width/height替换为r（半径），同时调整cx/cy到SVG的中心（SVG宽高150px，中心坐标为75,75）：

<div className="loader">
  <svg className="svg">
    <circle cx="75" cy="75" r="65" />
  </svg>
</div>

注：r设为65是因为stroke-width为10，stroke会向内外各延伸5px，65+5=70 < 75（中心到边缘的距离），避免stroke超出SVG容器

2. 修复CSS中的问题 #

2.1 定义缺失的CSS变量 #

你使用了var(--redwine)但未定义，需要在全局或.loader里添加变量定义：

.loader{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  --redwine: #8B0000; /* 替换为你需要的酒红色值 */
}

2.2 移除circle上无效的CSS属性 #

<circle>是SVG元素，width/height/background-color/z-index这些CSS属性对它无效，直接删除：

.svg circle{
  /* 删掉以下无效属性：
  background-color: red;
  width: 1em;
  height: 1em;
  z-index: 100;
  */
  fill: var(--redwine);
  stroke-width: 10;
  stroke: var(--redwine);
  stroke-linecap: round;
  /* 移除不必要的translate，已经通过cx/cy定位到中心 */
  /* transform:translate(5px, 5px); */
  stroke-dasharray: 408; /* 匹配圆的周长：2*π*65≈408.4，取整 */
  stroke-dashoffset: 408;
  animation: circular 4s linear infinite;
}

2.3 调整SVG的viewBox（可选但推荐） #

给SVG添加viewBox属性，让坐标系统和容器大小匹配，避免缩放时变形：

<svg className="svg" viewBox="0 0 150 150">

2.4 修正stroke-dasharray和动画值 #

根据新的半径（65）计算周长，调整stroke-dasharray和stroke-dashoffset的值，确保动画流畅：

@keyframes circular{
  0%, 100%{
    stroke-dashoffset: 408;
  }
  50%{
    stroke-dashoffset: 0;
  }
  50.1%{
    stroke-dashoffset: 816; /* 408*2 */
  }
}

最终完整代码 #

HTML #

<div className="loader">
  <svg className="svg" viewBox="0 0 150 150">
    <circle cx="75" cy="75" r="65" />
  </svg>
</div>

CSS #

.loader{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  --redwine: #8B0000;
}

.svg{
  width: 150px;
  height: 150px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.svg circle{
  fill: var(--redwine);
  stroke-width: 10;
  stroke: var(--redwine);
  stroke-linecap: round;
  stroke-dasharray: 408;
  stroke-dashoffset: 408;
  animation: circular 4s linear infinite;
}

@keyframes circular{
  0%, 100%{
    stroke-dashoffset: 408;
  }
  50%{
    stroke-dashoffset: 0;
  }
  50.1%{
    stroke-dashoffset: 816;
  }
}

这样修改后，circle就能正确渲染，并且旋转动画正常工作。

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