SVG 圓圈未出現在 HTML CSS 中

Question

我正在為我的應用程序創建一個非常簡單的加載器頁面。 我想使用一個旋轉的圓圈，正如我看到的教程，我使用了 SVG 和 circle 標簽。 這是代碼 HTML：

<div className="loader">
      <svg className="svg">
        <circle cx="70" cy="70" height="100px" width="100px" />
      </svg>
   </div>

這是本例中所有涉及的 CSS：

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

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

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

.svg circle{
  background-color: red;
  width: 1em;
  height: 1em;
  fill: var(--redwine);
  stroke-width: 10;
  stroke: var(--redwine);
  stroke-linecap: round;
  transform:translate(5px, 5px);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: circular 4s linear infinite;
  z-index: 100;
}

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

所有這些代碼的唯一問題是，每當我打開頁面，查看是否一切正常時，它都會給我一個空白頁面。 所以我試着檢查一下。 當我在瀏覽器中懸停 SVG 的代碼時，它會顯示一個旋轉的正方形的陰影，但是當我將鼠標懸停在圓形代碼中時，它會顯示一個帶有以下標簽的點： circle 0x0 。 我認為它沒有正確呈現，或者我正在阻止它。 我真的不知道。

有人可以幫忙嗎？ 十分感謝

Answer 1

您缺少半徑屬性r 。

<circle cx="70" cy="70" r="25" height="100px" width="100px" />

見下文：

 .loader { display: flex; justify-content: center; align-items: center; min-height: 100vh; }.svg { width: 150px; height: 150px; animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.svg circle { background-color: red; width: 1em; height: 1em; fill: var(--redwine); stroke-width: 10; stroke: var(--redwine); stroke-linecap: round; transform: translate(5px, 5px); stroke-dasharray: 440; stroke-dashoffset: 440; animation: circular 4s linear infinite; z-index: 100; } @keyframes circular { 0%, 100% { stroke-dashoffset: 440; } 50% { stroke-dashoffset: 0; } 50.1% { stroke-dashoffset: 880; } }

 <div className="loader"> <svg className="svg"> <circle cx="70" cy="70" r="25" height="100px" width="100px" /> </svg> </div>