Преобразование анимации SVG SMIL в анимацию CSS

Анимация, выполняемая с помощью SMIL, представляет собой анимацию вращения, в которой элемент #spinner поворачивается на 360 градусов каждые 1,5 секунды и имеет бесконечный цикл.

Последние два параметра animateTransform attributeName svg являются transform-origin css, поэтому для создания эквивалента CSS необходимо выполнить следующее:

• Создайте animation @keyframe- правило, которое осуществляет вращение rotate() from 0 deg to 360 deg.
• Примените анимацию к элементу #spinner, используя свойство анимации. Установите его продолжительность как 1,5s, итерацию сделайте бесконечной и timing function линейной.
  Они могут быть выполнены с использованием сокращенной записи анимации или подробно с использованием индивидуальных имен свойств анимации: animation-name, animation-duration, animation-iteration-count и animation-timing-function
• Установите transform-origin - 50px 50px для #spinner

#spinner { 
  animation: rotate 1.5s infinite linear; 
  transform-origin: 50px 50px; 
} 
@keyframes rotate { 
  from { 
    transform: rotate(0deg); 
  } 
  to { 
    transform: rotate(360deg); 
  } 
}

<?xml version="1.0" encoding="utf-8" ?> 
<svg height="512px" viewBox="0 0 100 100" width="512px" xmlns="http://www.w3.org/2000/svg"> 
  <g transform="scale(0.8) translate(-0.6, -0.6)"> 
    <g id="spinner"> 
      <path d="M50 15A35 35 0 1 0 74.787 25.213" fill="none" stroke="#19a29c" stroke-width="8px" /> 
      <path d="M50 0L50 30L66 15L50 0" fill="#19a29c" /> 
    </g> 
  </g> 
</svg>

Источник

Похожий топик:

Как данный пример анимации CSS сделать на чистом SVG SMIL