html - 带有 <style> 标签的 SVG 动画问题

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

提前谢谢你。

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>