Melyik SVG / SMIL DOM elemnek az `beginElement` módszer?

szavazat
2

Végső soron ez a Kioszk-stílusú app (jQuery 1.6.4), hogy futni fog a Firefox, így választ lehet Firefox-specifikus.

Próbálom, hogy egy animált SVG, de próbálom animálni által dinamikusan behelyezésével SMIL. Láttam semmit, ami azt sugallja, hogy nem lehet megtenni, és mindkét http://satreth.blogspot.ch/2013_01_01_archive.html és http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg azt jelzik, hogy meg lehet csinálni.

A probléma, ahogy én értem, hogy fel kell hívnom a beginElementmódszer, hogy elindítsa a dinamikusan beillesztett animáció, de nem látom sehol.

Itt egy hegedű bizonyítja a problémát: http://jsfiddle.net/2pvSX/

Ennek hiányában a választ arra a kérdésre, a címben:

  1. Mit csinálok rosszul?
  2. Vannak olyan rendelkezésre álló forrásokat, hogy jobban megértsék, mit akarok csinálni?

és ez a probléma:

  1. Hogy én meghatározó SVG?
  2. Hogyan hozok létre a SMIL?
  3. Hogy én elérésével SVG?
  4. Hogy én behelyezése SMIL?
  5. Valami egészen más?

Végül van egy jobb módja annak, hogy animálni az SVG?

A kérdést 03/10/2013 16:52
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
3

meg kell adni 'http://www.w3.org/2000/svg'az animáció létrehozása ehhez hasonló elem

$(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();    
});    

is eltávolítja ezt a sort animation = svg.children[1].children[0].children[1];, így az animáció elem van beginElement funkció
http://jsfiddle.net/2pvSX/1/

Válaszolt 03/10/2013 18:03
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more