SVG-анимация SMIL устарела - анимация SVG-круга и cx-свойство с CSS только?

Question

У меня есть SVG в моем HTML:

<img class="svg-loader" width="60" height="60" src="preloader.svg"> 

Это SVG содержит 3 круга, которые анимированные рядные, чтобы вращать и изменять их родные и ую-позицию:

<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="preloader-gradient" x1="0%" y1="0%" x2="100%" y2="0%"> 
      <stop offset="0%" style="stop-color:rgb(244,117,51);stop-opacity:1" /> 
      <stop offset="100%" style="stop-color:rgb(245,0,87);stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <g fill="none" fill-rule="evenodd"> 
     <g transform="translate(1 1)" stroke-width="2"> 
      <circle cx="5" cy="50" r="5" fill="url(#preloader-gradient)"> 
       <animate attributeName="cy" 
        begin="0s" dur="2.2s" 
        values="50;5;50;50" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
       <animate attributeName="cx" 
        begin="0s" dur="2.2s" 
        values="5;27;49;5" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
      </circle> 
      <circle cx="27" cy="5" r="5" fill="url(#preloader-gradient)"> 
       <animate attributeName="cy" 
        begin="0s" dur="2.2s" 
        from="5" to="5" 
        values="5;50;50;5" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
       <animate attributeName="cx" 
        begin="0s" dur="2.2s" 
        from="27" to="27" 
        values="27;49;5;27" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
      </circle> 
      <circle cx="49" cy="50" r="5" fill="url(#preloader-gradient)"> 
       <animate attributeName="cy" 
        begin="0s" dur="2.2s" 
        values="50;50;5;50" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
       <animate attributeName="cx" 
        from="49" to="49" 
        begin="0s" dur="2.2s" 
        values="49;5;27;49" 
        calcMode="linear" 
        repeatCount="indefinite" /> 
      </circle> 
     </g> 
    </g> 
</svg> 

Консоль Chrome бросает предупреждение «SVG-анимация SMIL (и т. д.) устарела и будет удалена. Вместо этого используйте анимацию CSS или веб-анимацию». Итак, вопрос в том, можно ли полностью заменить встроенную анимацию анимацией CSS.

Теперь, это тривиально, чтобы повернуть полный SVG бесконечно в CSS на 360 градусов:

.svg-loader { 
    -webkit-animation:spin 3s linear infinite; 
    -moz-animation:spin 3s linear infinite; 
    animation:spin 3s linear infinite; 
} 

@-moz-keyframes spin { 
    100% { 
    -moz-transform: rotate(360deg); 
    } 
} 

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

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

Однако, я застрял с CSS-анимации из Cy-позиций для каждого круга и не уверен, если это возможное.

Поблагодарите ваш совет.

Answer 1

Как упомянуто Kaiido перед:

SMIL не очень рекомендуется: только хром прекратил поддержку для него, и IE никогда не начинал его

Но вы можете использовать CSS-анимации для достижения тот же результат.

Вы должны поместить css в файл svg или поместить svg inline, используя тег img с внешней разметкой, имеет ограничения.

Например:

<svg viewBox="0 0 57 57" width=57 height=57> 
 
\t <style> 
 
\t \t @keyframes path{ 
 
\t \t \t 25%{ transform: translate(0,0); } 
 
\t \t \t 50%{ transform: translate(0,-44px); } 
 
\t \t \t 75%{ transform: translate(-45px,-22px); } 
 
\t \t \t 100%{ transform: translate(0,0); } 
 
\t \t } 
 
\t \t .circle{ 
 
\t \t \t animation: path 2.2s linear infinite; 
 
\t \t \t fill: red; 
 
\t \t } 
 
\t </style> 
 
\t <circle cx="49" cy="50" r=5 class="circle"></circle> 
 
</svg>

Но еще выше пример не будет работать в IE и Edge, вы могли бы решить ее с:

• код Это interally с HTML и CSS
• разделить svg на несколько svgs и анимировать теги svg
• использование JS (внутри файла SVG или встроенного)

Небольшой пример со вторым раствором:

@keyframes path{ 
 
\t 25%{ transform: translate(0,0); } 
 
\t 50%{ transform: translate(0,-44px); } 
 
\t 75%{ transform: translate(-45px,-22px); } 
 
\t 100%{ transform: translate(0,0); } 
 
} 
 
svg{ 
 
\t animation: path 2.2s linear infinite; 
 
\t margin-left: 50px; 
 
\t margin-top: 50px; 
 
\t width: 10px; 
 
\t height: 10px; 
 
} 
 
.circle{ 
 
\t fill: red; 
 
}

<svg viewBox="0 0 10 10" > 
 
\t <circle cx=5 cy=5 r=5 class="circle"></circle> 
 
</svg>