największy problem w tym, że podczas zmiany wartości DOM przeglądarka od razu renderuje wynik (przez co podczas zmiany wielu elementów zamiast renderować animację 25 razy na sekundę dla przykładu przeglądarka próbuje renderować np. 100 razy dla 4 elementów - co znacznie spowalnia wszystko nie potrzebnie ^^) - akurat o optymalizacji animacji zwykłych elementów opisywałem tutaj (i było by dobrze, gdyby atrybut d w path dało się określić w stylach

a, że wiele rzeczy można jakoś obejść to szukałem i niby znalazłem rozwiązanie ale nie jestem pewny, czy jest ono uniwersalne czy będzie działało tylko na Operze i Mozilli (niestety styczności z IE nie będę miał przez jakieś 2 tygodnie żeby to sprawdzić czy działa)
trick polega na tym, że standardowo przed animacją obliczamy wszystko, żeby nie tracić czasu podczas zmiany wartości i gdy mamy już te nowe wartości to element nadrzędny (parentNode) animowanych elementów ukrywamy (przypisujemy mu display: none) i przeglądarka nie będzie renderowała zmian innych wartości - po zmianie wszystkich wartości elementów animowanych element nadrzędny znowu pokazujemy (display: block)
Cytat(Dev.Opera)
Modifying an invisible element
When an element has its display style set to none, it will not need to repaint, even if its contents are changed, since it is not being displayed. This can be used as an advantage. If several changes need to be made to an element or its contents, and it is not possible to combine these changes into a single repaint, the element can be set to display:none, the changes can be made, then the element can be set back to its normal display.
This will trigger two extra reflows, once when the element is hidden, and once when it is made to appear again, but the overall effect can be much faster. It may also cause unwanted jumping of the scrollbar, if the element itself affects the scrolling offset. However, it can easily be applied to a positioned element without causing an unsightly effect.
When an element has its display style set to none, it will not need to repaint, even if its contents are changed, since it is not being displayed. This can be used as an advantage. If several changes need to be made to an element or its contents, and it is not possible to combine these changes into a single repaint, the element can be set to display:none, the changes can be made, then the element can be set back to its normal display.
This will trigger two extra reflows, once when the element is hidden, and once when it is made to appear again, but the overall effect can be much faster. It may also cause unwanted jumping of the scrollbar, if the element itself affects the scrolling offset. However, it can easily be applied to a positioned element without causing an unsightly effect.
var posElem = document.getElementById('animation'); posElem.style.display = 'none'; posElem.appendChild(newNodes); posElem.style.width = '10em'; /*... other changes ...*/ posElem.style.display = 'block';
Tylko właśnie... Czy ten Trick będzie działał w IE oraz czy ktoś zna jeszcze inne trick'i na optymalizacje animacji SVG/VML??