如何绘制具有不同颜色的两个半圆的 Svg 并对其应用动画

Question

我可以通过简单地将样式应用于 div 并为动画应用关键帧来使用 css 实现这一点 代码看起来像这样

.loader {
  margin: 10px auto;
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  border-right: 0.75em solid #E0E3E9;
  border-bottom: 0.75em solid #E0E3E9;
  border-left: 0.75em solid #6B04A8;
  border-top: 0.75em solid #6B04A8;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  border-radius: 50%;
  width: 30px;
  height: 30px;

}

@-webkit-keyframes load8 {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }

  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }

  100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}

<div class="loader">Loading...</div>

所以基本上应用了两组边框颜色和 50% 的边框半径使其看起来像一个圆形并对其应用了变换。 我需要在 svg 中做同样的事情，有人可以指出我从哪里开始的正确方向，提前谢谢

Answer 1

在这种情况下，我使用的是 2 个圆。第一个（底座）有一个银色的笔触。第二个有紫色的笔划，stroke-dasharray = "125.5" 表示有 125.5 的笔划和相同大小的间隙。 125.5 也代表圆周长的一半。

圆心在svg画布的原点(0,0) 请观察svg元素的viewBox：x:-50 y:-50 width:100 height:100

svg{width:50px;display:block; margin:0 auto;}

#theCircle{animation: load8 1s linear infinite;}

@keyframes load8 {
to {
    transform: rotate(-1turn);
  }
}

<svg viewBox="-50 -50 100 100"> 
   <circle  r="40" fill="none" stroke="silver" stroke-width="10" />
  <circle id="theCircle" r="40" fill="none" stroke="rebeccapurple" stroke-width="10" stroke-dasharray = "125.5" />
</svg>