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

В конечном счете, это для приложения в стиле киоска (с использованием 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/

Не ответил на вопрос в заголовке:

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

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

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

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


javascript svg jquery smil svg-animate
person pete    schedule 03.10.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

вам нужно добавить '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/

person Abraham Uribe    schedule 03.10.2013
comment
Просто чтобы понять, почему это работает, мне нужно убедиться, что элемент animateMotion использует то же пространство имен, что и SVG, иначе это не сработает? Или есть другая причина? - person pete; 03.10.2013
comment
да, его нужно создать с тем же пространством имен, иначе это будет то же самое, что и создание элемента с помощью createElement - person Abraham Uribe; 03.10.2013