CODEWITHSUNDEEP
htmlsvgsmil
SammySadati
SammySadati

Reputation: 13

SVG SMIL animateTo works fine in Chrome but not in Firefox or Safari

I have created a SVG animation by using <animateTo> that works fine in Chrome, but not in Firefox or Safari.

It works when the keySplines and keyTimes attributes are removed, but I need those for a smooth animation.

This is my code:

<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>

Link to codepen: https://codepen.io/SammySadati/pen/LoddPm

Upvotes: 1

Views: 163

Answers (1)

enxaneta
enxaneta

Reputation: 33024

The problem is that you have 7 keytimes and only 2 values. Also you need to put the animateTransform inside the path and I've changed dur from 5000ms to 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>

If you need 7 keytimes you will need to work with the attribute values instead of from and to

In the next example I'm using 4 values, 4 keyTimes and 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>

Upvotes: 1

Related Questions