SVG SMIL animateTo 在 Chrome 中运行良好，但在 Firefox 或 Safari 中无法运行答案

【问题标题】：SVG SMIL animateTo works fine in Chrome but not in Firefox or SafariSVG SMIL animateTo 在 Chrome 中运行良好，但在 Firefox 或 Safari 中无法运行
【发布时间】：2019-10-11 02:51:18
【问题描述】：

我使用 <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

【问题讨论】：

你应该报告一个 Chrome 错误，正确的做法是什么都不做，因为动画出错了。
动画出错是什么意思？代码错了吗？
是的，根据 exaneta 的回答。

标签： html svg smil

【解决方案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>

【讨论】：