SVG SMIL animateTo 在 Chrome 中工作正常，但在 Firefox 或 Safari 中不工作

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>

Link 到代码笔：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 中不工作

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

html

svg

smil