jQuery animieren von SVG-element

Ich habe ein svg in meiner Anwendung. Wie

<svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg">
<image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" />
</svg>

Bekam ich ein svg-element mit dem Namen '1_dice'. In einem HTML-button klicken, würde ich mag, um zu animieren, das element entsprechend der Parameter. Wie

$('#btn').click(function(){
     $('#1_dice').animate({'x':200},2000);
});

Habe ich versucht, dieses aber nicht funktioniert ...

  • Wenn der DOCTYPE der Seite nicht HTML5 beachten Sie, dass die IDs müssen mit einem Buchstaben beginnen.
  • danke für die Antwort .. Mein DOCTYPE ist <!DOCTYPE html> <html> <head> ich ändert sich auch der name "Würfel" . Aber nicht funktioniert .. sogar $('#Würfel').hide(); das funktioniert.. plz help
  • $('#Würfel').hide(); -- das ist Arbeit ... aber animate funktioniert nicht
  • oh, tut mir Leid .. ich bin nicht der iranische ... m indischen
  • keine Sorge, cool, wir haben Ramesh in Persien auch schöne Namen :)
InformationsquelleAutor ramesh | 2012-08-03
  1. 7

    jQuery Animation für die Animation von HTML-Elementen.
    Für die SVG, die Sie haben, um zu versuchen, jQuery SVG plugin.
    Bitte Folgen Sie dem link - http://keith-wood.name/svg.html

    • Um genauer zu sein, jQuery animate ist zum animieren von CSS-Eigenschaften. Einige CSS anwenden können, um SVG-Elemente, wie opacity, fill, stroke. Siehe diesem Artikel für eine Erklärung.
    InformationsquelleAutor Arjun Raj
  2. 10

    Ist es möglich ohne ein plugin, aber es geht um einen trick dann. Das Problem ist, dass x ist keine css-Eigenschaft, sondern ein Attribut, und jQuery.animieren nur animiert css-Eigenschaften. Aber Sie können den step parameter bestimmen Sie Ihr eigenes benutzerdefiniertes Verhalten für die animation.

    foo ist eine nicht vorhandene Eigenschaft, deren Wert animieren, verwenden wir in der Schritt-Funktion.

    $('#btn').click(function(){
    $('#dice_1').animate(
        {'foo':200},
        {
            step: function(foo){
                 $(this).attr('x', foo);
            },
            duration: 2000
        }
    );
});
    • Dies funktioniert nur, wenn der Wert, den Sie geben möchten ist eine Zahl, führen die Schritt-Funktion dauert nur eine Zahl.
    InformationsquelleAutor Sygmoral
Schreibe einen Kommentar