SVG动画问题与<style>标签

Question

我尝试在HTML中添加CSS代码，但是无法使SVG动画正常工作。我做错了什么？我的猜测是我引用<style>的方式不正确，但是经过几次尝试后我还是没能成功。

<svg>
  <style type="text/css">
    .spinner {
      animation: rotate 2s linear infinite;
      z-index: 2;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;
      width: 50px;
      height: 50px;
    }

    .path {
      stroke: hsl(210, 70, 75);
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }

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

      @keyframes dash {
        0% {
          stroke-dasharray: 1, 150;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -35;
        }
        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -124;
        }
      }
  </style>
  <svg class="spinner">
      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
  </svg>
</svg>

CodePen

Thank you in advance.

- Diego Oriani

Answer 1

你的动画效果很好。 但是你弄错了描边颜色的定义。hsl(210, 70%, 75%); 并且圆形元素的开标签缺少了闭合括号 >

<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" > </circle>

html, body {
  height: 100%;
  background-color: #000000;
}

<svg>
  <style type="text/css">
    .spinner {
      animation: rotate 2s linear infinite;
      transform-origin:center center;
      z-index: 2;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;
      width: 50px;
      height: 50px;
    }
  
    .path {
      stroke: hsl(210, 70%, 75%);
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }
  
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
  
      @keyframes dash {
        0% {
          stroke-dasharray: 1, 150;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -35;
        }
        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -124;
        }
      }
  </style>
  <g class="spinner">
      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
  </g>
</svg>

- Adam K.

---

我感谢你给了我如何解决弧形加载器的灵感。 - Adam K.

顺便说一下，您可能不是想两次使用svg。相反，请对其进行分组并修复旋转动画。-更新片段 - Adam K.

Answer 2

你需要关闭圆形的HTML标签

<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>

应该是

<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>

- hairmot