Перенести анимацию css на svg

Question

svg {
  width: 200px;
  height: 200px;
}

.spinner {
  fill: none;
  stroke: red;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dashoffset: 100.5;
  stroke-dasharray: 100.5;
  animation: spinner 1.5s ease-in-out infinite;
}

@keyframes spinner {
  0% {
    stroke-dasharray: 0, 100;
    stroke-dashoffset: 0
  }
  50% {
    stroke-dasharray: 65, 35;
    stroke-dashoffset: -35
  }
  100% {
    stroke-dasharray: 65, 100;
    stroke-dashoffset: -100.5
  }
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 35 36" xml:space="preserve">
  <circle class="spinner" cx="18" cy="18" r="16">
    <animateTransform attributeName="transform" type="rotate" dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite"></animateTransform>
  </circle>
</svg>

Возможно перенести анимацию css в svg, то есть без стилей, без классов. Только svg код

Answer 1

Почему бы и нет. Специально разделил ваш общий стиль на три разных куска внутри SVG. Вы примерно это хотели?

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 35 36" width="200px" height="200px" xml:space="preserve">
  <style type="text/css">
    @keyframes spinner {
    0% {stroke-dasharray: 0, 100; stroke-dashoffset: 0}
    50% {stroke-dasharray: 65, 35; stroke-dashoffset: -35}
    100% {stroke-dasharray: 65, 100; stroke-dashoffset: -100.5}
  }
  </style>
  <circle style="fill: none; stroke: red; stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 100.5; stroke-dasharray: 100.5; animation: spinner 1.5s ease-in-out infinite;" cx="18" cy="18" r="16">
    <animateTransform attributeName="transform" type="rotate" dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite"></animateTransform>
  </circle>
</svg>

БЛОГ НА HUSL

Перенести анимацию css на svg

Ответы (1 шт):