Как я могу нарисовать Svg с двумя полуодеями разных цветов и применить к нему анимацию

Question

Я могу сделать это, используя css, просто применяя стили к div и применяя ключевые кадры для анимации, код выглядит примерно так

.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). Обратите внимание на viewBox элемента svg: x: -50 y: - 50 ширина: 100 высота: 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>