SVG SMIL animateTo отлично работает в Chrome, но не в Firefox или Safari. - PullRequest
Новая
       30

SVG SMIL animateTo отлично работает в Chrome, но не в Firefox или Safari.

1 голос
/ 24 мая 2019

Я создал SVG-анимацию, используя <animateTo>, которая отлично работает в Chrome, но не в Firefox или Safari.

Работает, когда атрибуты keySplines и keyTimes удалены, но они нужны для плавной анимации.

Это мой код: 

<svg class="hiw-steps__morph" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" height="100%" width="100%" viewBox="0 0 500 500">
  <path  id="path0" d="M120.399523,21.2622729 C92.146201,2.04911041 37.1043026,11.4986169 13.0504556,35.6494234 C-11.0033913,59.8002298 -0.249326211,94.7145403 32.5542809,117.022042 C65.3578881,139.329544 101.512352,151.363715 132.710445,117.022042 C163.908538,82.680369 148.652846,40.4754353 120.399523,21.2622729 Z" fill="#FE8C3F"></path>
  <animateTransform href="#path0" from="0 0" to="250 50" attributeType="XML" dur="1000ms" calcMode="spline" fill="freeze" keyTimes="0 ; 0.22 ; 0.33 ; 0.55 ; 0.66 ; 0.88 ; 1" keySplines="0.1 0.8 0.2 1;
  0.1 0.8 0.2 1;
  0.1 0.8 0.2 1;
  0.1 0.8 0.2 1;
  0.1 0.8 0.2 1;
  0.1 0.8 0.2 1" attributeName="transform" type="translate"></animateTransform>
</svg>

Ссылка на codepen: https://codepen.io/SammySadati/pen/LoddPm

1 Ответ

1 голос
/ 24 мая 2019

Проблема в том, что у вас есть 7 ключей и только 2 значения.Также вам нужно поместить animateTransform в путь, и я изменил dur со 5000ms на 5s

<svg class="hiw-steps__morph" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" height="100%" width="100%" viewBox="0 0 500 500">
  <path  id="path0" d="M120.399523,21.2622729 C92.146201,2.04911041 37.1043026,11.4986169 13.0504556,35.6494234 C-11.0033913,59.8002298 -0.249326211,94.7145403 32.5542809,117.022042 C65.3578881,139.329544 101.512352,151.363715 132.710445,117.022042 C163.908538,82.680369 148.652846,40.4754353 120.399523,21.2622729 Z" fill="#FE8C3F">
  <animateTransform 
                    attributeType="XML" 
                    attributeName="transform"
                    type="translate"
                    from="0 0" to="250 50" 
                    dur="5s"
                    fill="freeze"/></path>
</svg>

Если вам нужно 7 ключей, вам нужно будет работать с атрибутом values вместо from и to

В следующем примереЯ использую 4 значения, 4 keyTimes и 3 keySplines: 

<svg class="hiw-steps__morph" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" height="100%" width="100%" viewBox="0 0 500 500">
  <path  id="path0" d="M120.399523,21.2622729 C92.146201,2.04911041 37.1043026,11.4986169 13.0504556,35.6494234 C-11.0033913,59.8002298 -0.249326211,94.7145403 32.5542809,117.022042 C65.3578881,139.329544 101.512352,151.363715 132.710445,117.022042 C163.908538,82.680369 148.652846,40.4754353 120.399523,21.2622729 Z" fill="#FE8C3F">
  <animateTransform 
  attributeType="XML" attributeName="transform" type="translate"
                    values= "0,0; 63,85; 170,-35; 0,0" 
                    keyTimes= "0; 0.7; 0.9; 1" 
                    dur="5s" 
                    calcMode="spline"
                    keySplines= ".5 0 .5 1; 0 .75 .25 1; 1 0 .25 .25"
                    fill="freeze" 
                    ></animateTransform></path>
</svg>
...