SVG 问题：使用值和计算模式

Question

我正在学习如何制作 svg 动画。

我可以使用 calcMode="spline" 在两个形状之间设置动画，我可以在没有 calcMode="spline" 的情况下在三个形状之间设置动画，但是我不能使用 calcMode=[=21 在三个形状之间设置动画=].

这是我的例子：

<animate
        attributeName="d"   
        attributeType="XML"     
        begin="0"               
        from="M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
        C662.2,170.5,662.1,170.5,662.1,170.5z"

        to="M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
        C704.4,146.4,704.2,146.5,704,146.5z"
        dur="2s"
        values="
        M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
        C662.2,170.5,662.1,170.5,662.1,170.5z;
        M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-16.4-25.1c-0.3-0.7,3.6-0.5,3.6-0.5l15.6,24.4
        c0.3,0.8,0,1.6-0.8,2C704.4,146.4,704.2,146.5,704,146.5z;
        M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
        C704.4,146.4,704.2,146.5,704,146.5z"

        calcMode      = "spline"
        keySplines    = "0 0.75 0.25 1"
        keyTimes      = "0;1;2"
        />

如果我删除值并调整 keyTimes="0;1"，它会起作用。如果我删除 calcMode、keySplines 和 keyTimes，它就可以工作。但它不能一起工作。我是不是哪里弄错了，还是我们不能一起使用？

感谢您的帮助！

Answer 1

来自 SVG 规范：

the ‘keySplines’ values are the control points. Thus, there must be one fewer sets of control points than there are ‘keyTimes’.

您有一个 keySplines 值，因此您需要 2 个 keyTimes 值。或者，您需要有 2 个 keySplines 值才能支持 3 个 keyTimes 值。

SVG 问题：使用值和计算模式

SVG issue : using values and calcmode

svg

smil

svg-animate