When SVG content is created in JS in a setTimeout method it fails to animate. But when created immediately, it works fine. I tried playing with the animation start times but it made no difference. See the reported URLs. I have verified that the URL in the report does not behave as expected in Chrome 18 or 19. http://code.google.com/p/chromium/issues/detail?id=109372 Chrome Version : 13.0.782.220 (Official Build 99552) Linux URLs (if applicable) : http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements/8557233#8557233 Other browsers tested: Firefox 8.0.1 OK What steps will reproduce the problem? 1. visit http://jsfiddle.net/tap0ri/SF5nE/2/ 2. blue dot doesn't move left-right as it does with http://jsfiddle.net/SF5nE/ What is the expected result? The dynamically added animateTransform element should cause the blue dot to move from left to right, which it does with http://jsfiddle.net/SF5nE/. This is to do with the element being added later than page load maybe What happens instead? It doesn't
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.