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

Я учусь анимировать svg.

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

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

<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, это сработает. Но это не работает вместе. Я где-то ошибся, или мы не можем использовать оба вместе?

Спасибо за помощь!


svg smil svg-animate
person Christel    schedule 31.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из спецификации SVG:

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

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

person Robert Longson    schedule 31.03.2015
comment
Небольшая путаница: один набор сплайнов = два раза (основная ситуация, которая работала). Для трех keyTimes и values вам понадобится два набора сплайнов, например keySplines="0 0.75 0.25 1; 0 0.75 0.25 1". - person AmeliaBR; 01.04.2015
comment
Видимо, я не умею складывать или вычитать или что-то в этом роде. Ответ исправлен. - person Robert Longson; 01.04.2015