Question

我正在尝试在HTML中添加CSS代码，但是我无法让SVG动画工作。我在这做错了什么？我的客人是我错误地引用＆lt; style＆gt; 但经过几次尝试后我无法正常工作。

＆＃xA;＆＃xA;

 ＆LT; SVG＆GT;＆＃XA; ＆lt; style type =“text / css”＆gt;＆＃xA; .spinner {＆＃xA;动画：旋转2s线性无限;＆＃xA; z-index：2;＆＃xA; position：absolute;＆＃xA;顶部：50％;＆＃xA;左：50％;＆＃xA;保证金：-25px 0 0 -25px;＆＃xA;宽度：50px;＆＃xA;身高：50px;＆＃xA; }＆＃XA;＆＃XA; .path {＆＃xA; stroke：hsl（210,70,75）;＆＃xA; stroke-linecap：round;＆＃xA;动画：破折号1.5s轻松进出无限;＆＃xA; }＆＃XA;＆＃XA; @keyframes轮换{＆＃xA; 100％{＆＃xA; transform：rotate（360deg）;＆＃xA; }＆＃XA; }＆＃XA;＆＃XA; @keyframes dash {＆＃xA; 0％{＆＃xA; stroke-dasharray：1,150;＆＃xA; stroke-dashoffset：0;＆＃xA; }＆＃XA; 50％{＆＃xA; stroke-dasharray：90,150;＆＃xA; stroke-dashoffset：-35;＆＃xA; }＆＃XA; 100％{＆＃xA; stroke-dasharray：90,150;＆＃xA; stroke-dashoffset：-124;＆＃xA; }＆＃XA; }＆＃XA; ＆LT; /风格＆GT;＆＃XA; ＆lt; svg class =“spinner”＆gt;＆＃xA; ＆lt; circle class =“path”cx =“25”cy =“25”r =“20”fill =“none”stroke-width =“5”＆lt; / circle＆gt;＆＃xA; ＆lt; / svg＆gt;＆＃xA;＆lt; / svg＆gt;＆＃xA;

＆＃xA;＆＃xA;

CodePen

＆＃xA;＆＃xA;

提前谢谢。

＆＃xA;

Answer 1

您的动画有效。您搞砸了笔触颜色定义。 hsl(210, 70%, 75%); 和圆形元素开始标记缺少右括号>

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要关闭圈子的

Rowid batch maker checker date
1     101   john  null    4feb
2     101   john  raja    4feb
3     101   john  null    5feb
4     101   john  raja    6feb
5     101   john  null    9feb

应该是

Batch maker checker
101   john  raja    -- 1st and 2nd row
101   john  raja    -- 3rd and 4th row
101   john  null    -- 5th row only

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

2 个答案: