Проблема SVG: использование значений и calcmode

Question

Я изучаю, как оживить svg.

Я могу анимировать между двумя формами с помощью calcMode = «сплайн», я могу анимировать между тремя формами без calcMode = «сплайн», но я не могу анимировать между тремя фигурами с помощью calcMode = «сплайн».

Вот мой пример:

<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 Спецификация:

в «keySplines» значения являются контрольными точками. Таким образом, должно быть меньше наборов контрольных точек, чем есть «keyTimes».

У вас есть одно значение keySplines, поэтому вам нужны 2 значения ключа. В качестве альтернативы вам необходимо иметь 2 значения keySplines, чтобы поддерживать 3 значения ключа.