Какой элемент SVG/SMIL DOM имеет метод `beginElement`?

Question

В конечном счете это для приложения в стиле киоск (с использованием jQuery 1.6.4), которое будет работать в Firefox, поэтому ответы могут быть специфичными для Firefox.

Я пытаюсь сделать анимированный SVG, но я пытаюсь оживить его, динамически вставляя SMIL. Я не видел ничего, что предполагает, что это невозможно сделать, и оба http://satreth.blogspot.ch/2013_01_01_archive.html и http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg, похоже, указывают, что это можно сделать.

Проблема, поскольку я понимаю, что мне нужно вызвать метод beginElement, чтобы запустить динамически вставленную анимацию, но я ее нигде не вижу.

Вот скрипка, демонстрирующая проблему: http://jsfiddle.net/2pvSX/

Failing ответа на вопрос в названии:

1. Что я делаю неправильно?
2. Есть ли какие-либо ресурсы для лучшего понимания того, что я пытаюсь сделать?

и это проблема с:

1. Как я определяю в SVG?
2. Как я создаю SMIL?
3. Как я могу получить доступ к SVG?
4. Как я вставляю SMIL?
5. Что-то еще полностью?

И, наконец, есть ли лучший способ анимировать SVG?

Answer 1

вам нужно добавить 'http://www.w3.org/2000/svg' для создания анимации элемента, как этого

$(document).ready(function() { 
    var svg = $('svg').get(0), 
    square = svg.getElementById('red'), 
    animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion'); 
    animation.setAttributeNS(null, 'id', 'walker'); 
    animation.setAttributeNS(null, 'begin', 'indefinite'); 
    animation.setAttributeNS(null, 'end', 'indefinite'); 
    animation.setAttributeNS(null, 'dur', '10s'); 
    animation.setAttributeNS(null, 'repeatCount', 'indefinite'); 
    animation.setAttributeNS(null, 'path', 'M 0 0 H 800 Z'); 
    square.appendChild(animation); 
    console.log(animation); 
    console.log(typeof animation.beginElement); 
    animation.beginElement();  
});  

также удалить эту строку animation = svg.children[1].children[0].children[1]; поэтому элемент анимации имеет функцию beginElement
http://jsfiddle.net/2pvSX/1/