Question

我通过使用<animateTo>创建了SVG动画，该动画在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

Answer 1

问题是您有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>

SVG SMIL animateTo在Chrome中可正常运行，但在Firefox或Safari中无法正常运行

1 个答案: