Html SVG动画问题与<；风格>；标签

我试图在HTML中添加CSS代码，但在让SVG动画正常工作时遇到了问题。我做错了什么？我的问题是我引用了错误的

，但经过几次尝试后，我无法让它工作

<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>

斯宾纳先生{
动画：旋转2s线性无限；
z指数：2；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-25px0-25px；
宽度：50px；
高度：50px；
}
.路径{
中风：hsl（210,70,75）；
笔划线头：圆形；
动画：dash 1.5s轻松输入输出无限；
}
@关键帧旋转{
100% {
变换：旋转（360度）；
}
}
@关键帧破折号{
0% {
笔划阵列：1150；
笔划偏移：0；
}
50% {
行程：90150；
行程偏移：-35；
}
100% {
行程：90150；
行程偏移：-124；
}
}
你的动画可以正常工作。你搞乱了笔划颜色定义<代码>hsl（210,70%，75%）
圆圈元素开始标记缺少结束括号
>

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


斯宾纳先生{
动画：旋转2s线性无限；
变换原点：中心；
z指数：2；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-25px0-25px；
宽度：50px；
高度：50px；
}
.路径{
卒中：hsl（210,70%，75%）；
笔划线头：圆形；
动画：dash 1.5s轻松输入输出无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（359度）；
}
}
@关键帧破折号{
0% {
笔划阵列：1150；
笔划偏移：0；
}
50% {
行程：90150；
行程偏移：-35；
}
100% {
行程：90150；
行程偏移：-124；
}
}
您需要关闭circle的html标记

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

我感谢你给了我一个如何解决arc加载程序的灵感。@DiegoOriani顺便说一句，你可能不想使用svg两次。而是分组并修复旋转动画。-更新的代码片段
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>