2012-05-07 4 views
1

Я использую внедренный SVG в XHTML и хочу создать анимацию из Javascript, но он не работает, как ожидалосьсоздание анимации из Javascript с помощью встроенного SVG в XHTML

Я моделирование бизнес-процессов с XPDL и подключить моделирование к SVG-графику, которую я анимацию использую javascript. Я делаю это в Firefox, а модель и графика встроены в XHTML. Теперь проблема в том, что я хочу использовать animateMotion-Tag для перемещения объекта по пути. Оба уже существуют, поэтому я попытался написать свое решение в SVG-файл, и это сработало нормально. Он выглядел так:

<animateMotion xlink:href="#id1" rotate="auto" dur="2s"> 
    <mpath xlink:href="#id2"> 
</animateMotion> 

Конечно, пространства имен установлены правильно, поэтому это работает так, как ожидалось. Я запускаю его вручную, поэтому времени начала не требуется. Теперь, мой подход делает то же самое в существующей смешанной XHTML/SVG-дом:

function moveAlongPath(elemId,pathId,rotate,duration) 
{ 
    var svgNs = "http://www.w3.org/2000/svg"; 
    var xlinkNs = "http://www.w3.org/1999/xlink"; 
    var motionElem = document.createElementNS(svgNs,"animateMotion"); 
    motionElem.setAttributeNS(xlinkNs,"href","#" + elemId); 
    motionElem.setAttributeNS(svgNs,"rotate",rotate); 
    motionElem.setAttributeNS(svgNs,"dur",duration + "ms"); 
    var pathRef = document.createElementNS(svgNs,"mpath"); 
    pathRef.setAttributeNS(xlinkNs,"href","#" + pathId); 
    motionElem.appendChild(pathRef); 
    var animElem = svgRootNode.getElementById(elemId); // It is indeed the <svg>-Node 
    animElem.appendChild(motionElem); 
    // Setting x and y to 0 is important for the Element to be "on" the Path 
    animElem.setAttribute("x",0); 
    animElem.setAttribute("y",0); 
    motionElem.beginElement(); 
} 

Когда я проверяю РОВ поджигатель, это, кажется, производит ту же структуру узла с теми же атрибутами, хотя HREF isnt префикс xlink :, но setAttributeNS должен это сделать, правильно? Проблема здесь в том, что я не могу запустить анимацию с beginElement(). Здесь ничего не происходит.

Я надеюсь, что там есть помощь, я действительно отчаялся прямо сейчас.

EDIT: Я нашел его наконец. Проблема исчезает, когда я использую

setAttributeNS(null,"attr",value) 

вместо

setAttributeNS(svgNs,"attr",value) 

исправить это, если я не прав, но это не мой первый подход как думали XML? То, что не должно быть имен без атрибутов? В любом случае - РЕШАЕМ!

+0

Вы никогда не должны использовать пространство имен SVG для атрибутов. Вместо этого отправьте свой ответ в качестве ответа и примите его. –

ответ

0

Использование

setAttributeNS(null,"attr",value) 

вместо

setAttributeNS(svgNs,"attr",value) 
Смежные вопросы