Html 在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

发布于07月02日

我使用的是自定义缓动功能，所以我使用keySplines、keyTimes和values属性来实现这一点.此动画在Chrome和Safari中有效，但在Firefox中，球对象应该遵循循环路径，根本不会移动(相反，球在左上角，因为没有x，y位置).

如果我go 掉这些属性，动画就会在Firefox中播放，但没有我想要的缓动功能.

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="156.761"
      height="139.855"
      viewBox="0 0 156.761 139.855"
    >
      <circle id="ball" r="5" fill="red"/>
        <path
        id="foo-rail"
        fill="none"
        stroke="lightgrey"
        d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
      <animateMotion
        href="#ball"
        dur="2s"
        begin="0s"
        fill="freeze"
        rotate="auto"
        calcMode="spline"
        keySplines="0.31 0.24 0.41 0.88"
        keyTimes="0;1"
        values="0;1"
      >
        <mpath href="#foo-rail" />
      </animateMotion>
    </svg>

推荐答案

这里的values个属性和keyPoints个属性之间有一个重要的区别.

values，与from、to或by相同，根据<animateMotion>、"must consists of a list of x, y coordinate pairs"的spec.它们旨在提供折线形式的路径(但在语法上有细微差别).如果存在path属性或<mpath>子元素，则应忽略value属性.例如，您可以将跨视口从左到右的移动描述为values="0% 50%; 100% 50%".
keyPoints是SVG到SMIL格式的扩展.它们使用0...1到describe范围内的浮点数，表示对象应沿路径移动的距离:"Distance calculations use the user agent's distance along the path algorithm."例如，您可以将来回移动描述为keyPoints="0;1;0".

您的代码将两者混淆了.只需将values重命名为keyPoints，保留值列表，您的动画就会按预期运行.

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="156.761"
      height="139.855"
      viewBox="0 0 156.761 139.855"
    >
      <circle id="ball" r="5" fill="red"/>
        <path
        id="foo-rail"
        fill="none"
        stroke="lightgrey"
        d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
      <animateMotion
        href="#ball"
        dur="2s"
        begin="0s"
        fill="freeze"
        rotate="auto"
        calcMode="spline"
        keySplines="0.31 0.24 0.41 0.88"
        keyTimes="0;1"
        keyPoints="0;1"
      >
        <mpath href="#foo-rail" />
      </animateMotion>
    </svg>